javascript - How to expand or collapse all rows using the ExtJs rowexpander? - Stack Overflow

admin管理员组

文章数量:1355574

I have seen other similar questions answered, but I cannot get any of the solutions to work. For instance, one solution was to count the records in the grid and loop through calling expandRow(rowNumber) for each one. However, the rowexpander that I am using in ExtJs 4.2 does not have this function.

I have seen other similar questions answered, but I cannot get any of the solutions to work. For instance, one solution was to count the records in the grid and loop through calling expandRow(rowNumber) for each one. However, the rowexpander that I am using in ExtJs 4.2 does not have this function.

• javascript
• extjs4.2

Share Improve this question Follow asked Feb 14, 2014 at 19:11 Benjamin CuninghamBenjamin Cuningham 90611 gold badge1313 silver badges2828 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I figured out a solution to this:

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

I am guessing that the selection of the plugin is not the proper way to do so, but I do not know the proper way.

I expanded benjamincunningham's solution and added a helper function. Code is set up as stand alone functions so you can use them where you want.

Takes in 2 parameter: grid object: Ext.getCmp('gridId') or any grid reference : boolean for expand: true to expand all, false to collapse

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

First of all, we don't need for each to get plugin, just need to set plugin id and get it by 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);
          }
      }
  }],

Now, it's easy to expand/collapse all rows:

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

If the grid store contains more rows then the rows rendered, adding a bufferedRenderer to the grid can help, as the number of nodes and the number of records in the store count may not match.

本文标签： javascriptHow to expand or collapse all rows using the ExtJs rowexpanderStack Overflow