CODEWITHSUNDEEP
javascriptextjs4.2
Benjamin Cuningham
Benjamin Cuningham

Reputation: 906

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: 2

Views: 7088

Answers (4)

user29783013
user29783013

Reputation: 1

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.

Upvotes: 0

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: 906

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: 4

Related Questions