extjs rowexpander how to expand all

Question

I'm using Ext.ux.grid.RowExpander

var expander = new Ext.ux.grid.RowExpander({
  tpl : new Ext.Template(
 '<p>{history}</p>'
 )
});

it's used in my grid:

 var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            expander,
        ...

Now i want all expander rows to be expanded by deafult.

I'm trying to use expander.expandRow(grid.view.getRow(0)); (i think if i make it, i'll be able to use a for loop :) but i get an error

this.mainBody is undefined @ ***/ext/ext-all.js:11

Please, help me to expand all rows of my grid! Thanks!

Answer 1

You can do this with a loop, it's quite simple...

for(i = 0; i <= pageSize; i++) {
   expander.expandRow(i);
}

Where pageSize is the number of records per page in your grid. Alternatively you could use the store's count (probably a more scalable solution)...

for(i = 0; i <= grid.getStore().getCount(); i++) {
    expander.expandRow(i);
}

Answer 2

In 4.1.3 i use this method

function expand() {
    var expander = grid.plugins[0];
    var store = grid.getStore();

    for ( i=0; i < store.getCount(); i++ ) {
        if (expander.isCollapsed(i)) {
            expander.toggleRow(i, store.getAt(i));
        }
    }
}

Answer 3

If your Grid uses a DirectStore or some other RPC mechanism, you may want to listen for the store's load event:

grid.store.addListener('load', function() {
  var expander = grid.plugins;
  for(i = 0; i < grid.getStore().getCount(); i++) {
    expander.expandRow(i);
  }
}

Btw: It should be "i < ..." instead of "i <= ...".

Answer 4

You can declare a grouping object and then call it from within your GridPanel:

// grouping
var grouping = Ext.create('Ext.grid.feature.Grouping',{
    startCollapsed: true, // sets the default init collapse/expand all
});

var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        expander,
    ...

Then add this code in the body of you GridPanel:

    // collapse/expand all botton
    tbar: [{
                text: 'collapse all',
                handler: function (btn) {        
                    grouping.collapseAll();
                }
            },{
                text: 'expand all',
                handler: function (btn) {        
                    grouping.expandAll();
                }
            }],

It will add two buttons that expand/collapse all the groups. If you want everything to be expanded/collapsed by default notice the 'startCollapsed' variable above.