CODEWITHSUNDEEP
javascriptextjs4.2
Benjamin Cuningham
Benjamin Cuningham

Reputation: 886

How to expand or collapse all rows using the ExtJs rowexpander?

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.

Upvotes: 1

Views: 7057

Answers (3)

Yaroslav
Yaroslav

Reputation: 466

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

Upvotes: 2

Alex
Alex

Reputation: 41

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

Upvotes: 2

Benjamin Cuningham
Benjamin Cuningham

Reputation: 886

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.

Upvotes: 3

Related Questions