extjs - extjs rowexpander プラグイン: 1 行ずつ展開する

Question

アプリでネストされたグリッドで RowExpander プラグインを使用しています。一度に1行だけ展開したいので、「+」アイコンをクリックすると、他のすべての行が折りたたまれなければなりません。どうやってやるの？

Answer 1

rowexpander プラグインの expandbody イベントをリッスンし、最後に展開された行を追跡する必要があります。新しい行が展開されるたびに、toggleRow を使用して、以前に展開された行を折りたたみます。

行を切り替えるには:

grid.getPlugin( pluginId ).toggleRow(rowIndex)

行が折りたたまれているかどうかを確認するには (RowExpander.js から適用されたコード) - もっと良い方法があるかもしれません..?

var rowExpander = grid.getPlugin( pluginId );
var rowNode = grid.getView().getNode(rowIdx);
var row = Ext.fly(rowNode, '_rowExpander');
var isCollapsed = row.hasCls(rowExpander.rowCollapsedCls);

Answer 2

Ext 6.0.1 の場合 次のコードが役に立ちます。これを行うより簡単な方法があるかどうかを確認できてうれしいです。

var rowExpander = yourGrid.getPlugin('yourPluginId');
var expandedRecords = rowExpander.recordsExpanded;
var currentExpandedRecord;
var currentInternalId = 0; // start from 1
var currentIndex = -1; // start from 0

for(var prop in expandedRecords) {
    if(expandedRecords.hasOwnProperty(prop)) {
        // expandedRecords is storing internal id, 
        // and internal id start form 1 in Ext 6.0.1
        currentInternalId = parseInt(prop, 10);

        if(currentInternalId && expandedRecords[prop] === true) {

            // extjs 6.0.1 store data index start from 0
            currentExpandedRecord = yourGrid.store.getByInternalId(currentInternalId);
            currentIndex = yourGrid.store.indexOf(currentExpandedRecord);
            rowExpander.toggleRow(currentIndex, currentExpandedRecord); 
        }
    }
}

rowExpander.toggleRow(index, record);