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

4 Answers 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.