extjs - extjs rowexpander 插件：一次展开一行

Question

我在我的应用程序中使用带有嵌套网格的 RowExpander 插件。我想一次只展开一行，所以当我点击“+”图标时，所有其他行都必须折叠。我怎样才能做到这一点？

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);