Geek Answers Handbook

Extjs rowexpander how to expand all

I am using Ext.ux.grid.RowExpander

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

it is used in my grid:

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

Now I want all expander lines to expand with deafult.

I am trying to use expander.expandRow(grid.view.getRow(0)); (I think if I do this, I can use the for :) loop, but I get an error

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

Please help me expand all the lines of my grid! Thanks!

+4
source share
4 answers

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

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

Where pageSize is the number of records per page in your grid. Alternatively, you can use a store account (perhaps a more scalable solution) ...

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

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)); } } }
+3
source

If your Grid uses DirectStore or some other RPC mechanism, you can listen to the store 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 <= ...".

+1
source

You can declare a grouping object and then call it from 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 to your GridPanel body:

  // 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 groups. If you want everything to expand / collapse by default, pay attention to the variable "startCollapsed" above.

+1
source

More articles:


All Articles