Question

我已经看到其他类似的问题得到了解答，但我无法获得任何解决方案。例如，一种解决方案是计算网格中的记录并循环调用每个记录的expandRow（rowNumber）。但是，我在ExtJs 4.2中使用的rowexpander没有这个功能。

Answer 1

我扩展了benjamincunningham的解决方案并增加了辅助功能。代码设置为独立功能，因此您可以在任意位置使用它们。

接受2个参数：grid对象：Ext.getCmp（＆＃39; gridId＆＃39;）或任何网格参考：boolean for expand：true表示全部展开，false表示折叠

function getRowExpander(plugins){
var plugin;
  var length = plugins.length;
  for(var i =0; i < length; i++){
     if(plugins[i].ptype == 'rowexpander'){
        plugin = plugins[i];
        i = length; // ghetto loop exit
         }
   }
return plugin;
}

function toggleAll(grid, expand){
    expand = typeof expand !== 'undefined' ? expand : expand;


        var rowExpander = getRowExpander(grid.plugins);
        var nodes = rowExpander.view.getNodes();

        var length = nodes.length;
    for (var i = 0; i < length; i++) {
        var node = Ext.fly(nodes[i]);

        if (node.hasCls(rowExpander.rowCollapsedCls) === expand) {
            rowExpander.toggleRow(i, grid.store.getAt(i));
        }
    }
}

Answer 2

我想出了一个解决方案：

expandAll: function (expand) {
    expand = typeof expand !== 'undefined' ? expand : true;

    var grid = this,
        store = grid.getStore(),
        rowExpander = grid.plugins[0],
        nodes = rowExpander.view.getNodes();

    for (var i = 0; i < nodes.length; i++) {
        var node = Ext.fly(nodes[i]);

        if (node.hasCls(rowExpander.rowCollapsedCls) === expand) {
            rowExpander.toggleRow(i, store.getAt(i));
        }
    }
},

我猜测插件的选择不是正确的方法，但我不知道正确的方法。

Answer 3

首先，我们不需要for each来获取插件，只需要设置插件id并通过ID获取它：

   plugins: [{
      ptype: 'rowexpander',
      pluginId: 'rowexpander',
      selectRowOnExpand: true,
      //.....
      //..... 
      expandRow: function(rowIdx) {
          var rowNode = this.view.getNode(rowIdx),
              row = Ext.get(rowNode),
              nextBd = Ext.get(row).down(this.rowBodyTrSelector),
              record = this.view.getRecord(rowNode),
              grid = this.getCmp();
          if (row.hasCls(this.rowCollapsedCls)) {
              row.removeCls(this.rowCollapsedCls);
              nextBd.removeCls(this.rowBodyHiddenCls);
              this.recordsExpanded[record.internalId] = true;
              this.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
          }
      },

      collapseRow: function(rowIdx) {
          var rowNode = this.view.getNode(rowIdx),
              row = Ext.get(rowNode),
              nextBd = Ext.get(row).down(this.rowBodyTrSelector),
              record = this.view.getRecord(rowNode),
              grid = this.getCmp();
          if (!row.hasCls(this.rowCollapsedCls)) {
              row.addCls(this.rowCollapsedCls);
              nextBd.addCls(this.rowBodyHiddenCls);
              this.recordsExpanded[record.internalId] = false;
              this.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
          }
      }
  }],

现在，扩展/折叠所有行很容易：

   var rowExpander = grid.getPlugin("rowexpander")
   //we can use as:
   rowexpander.expandRow(rowIndex);
   //or
   rowexpander.collapseRow(rowIndex);
   //or use for each
   var nodes = rowExpander.view.getNodes()
   for (var i = 0; i < nodes.length; i++) {
        rowExpander.collapseRow(i);
   }

如何使用ExtJs rowexpander展开或折叠所有行？

3 个答案: