PDA

View Full Version : Issue with expand all when using rowexpander+bufferedgrid



ggkaushik
21 Jan 2014, 1:49 PM
I have a problem when I try to implement expand all/collapse all functionality when using with rowexpander+bufferedgrid.


{
text: 'Expand All',
handler: function(){
var expander = grid.getPlugin('rowex');
store = grid.getStore();
alert(store.getCount());
for (var i = 0; i < store.getCount()-1; i++) {
var record = store.getAt(i);
if(grid.view.getNode(i) != null) {
expander.toggleRow(i, record);
}
}
}
}


I have the buffered store settings as,



plugins: [{
ptype: 'bufferedrenderer',
pluginId: 'buffrender',
trailingBufferZone: 20,
leadingBufferZone: 20
},{
ptype: 'rowexpander',
pluginId: 'rowex',
rowBodyTpl : new Ext.XTemplate(
'<p><b>Join Date:</b> {joinDate}</p>',
'<p><b>DOB:</b> {dob}</p>',
'<p><b>Sick Days:</b> {sickDays:this.formatChange}</p>',
{
formatChange: function(v){
var color = v >= 2 ? 'green' : 'red';
return '<span style="color: ' + color + ';">' + v + '</span>';
}
})
}]



But I am not able to identify if a row is expanded or collapsed.

Any help/guidance much appreciated.

Gary Schlosberg
6 Feb 2014, 10:46 AM
Here's a thread that has an example that might help you get this working:
http://www.sencha.com/forum/showthread.php?259423

ggkaushik
11 Feb 2014, 8:27 AM
Gary, Thanks.

But when i access the link, it says I donr have access.

Gary Schlosberg
11 Feb 2014, 9:50 AM
Apologies, I hadn't realized that it was a Premium thread. I can't post the entire discussion, but here is a post from pbaccari (http://www.sencha.com/forum/member.php?6168-pbaccari) in which he includes the example I mentioned:



Hi,

Here an extend of RowExpander plugin to collapse, expand, collapseAll, expandAll grid rows:



Ext.define("myApp.grid.maAppPluginRowExpander", {
alias: "plugin.myapprowexpander",
extend: "Ext.grid.plugin.RowExpander",


isCollapsed: function (rowIdx) {
var me = this,
rowNode = me.view.getNode(rowIdx),
row = Ext.fly(rowNode, '_rowExpander');


return row.hasCls(me.rowCollapsedCls)
},


collapse: function (rowIdx) {
if (this.isCollapsed(rowIdx) == false) {
this.toggleRow(rowIdx, this.grid.getStore().getAt(rowIdx));
}
},


collapseAll: function () {
for (i = 0; i < this.grid.getStore().getTotalCount(); i++) {
this.collapse(i);
}
},


expand: function (rowIdx) {
if (this.isCollapsed(rowIdx) == true) {
this.toggleRow(rowIdx, this.grid.getStore().getAt(rowIdx));
}
},


expandAll: function () {
for (i = 0; i < this.grid.getStore().getTotalCount(); i++) {
this.expand(i);
}
}


});


An example to create plugin grid :


...
plugins: [{
ptype: "myapprowexpander",
pluginId: "myRowExpanderPluginId"
]
}
],
...



An example to use of expandAll rows :



{
xtype: "button",
id: "myButtonId",
sagheOrdre: 1,
text: "Expand All",
tooltip: "Expand All",
icon: "images/expand-all.gif", // put your favorite icon !
handler: function () {
monPlugin = Ext.getCmp("myGridId").getPlugin("myRowExpanderPluginId");


monPlugin.expandAll();
}
}


Best regards.

josei
20 Nov 2015, 4:27 AM
I am using the rowexpander plugin in a grid.

With a button I want to expand and collapse all.

Also, I want to expand them by default at the beginning.

I am using EXTJS 5.1.1GPL.
I use the solution proposed in this post.

In Fiddle it works well.

http://stackoverflow.com/questions/33445429/expand-all-grid-rows-by-default-with-rowexpander-extjs-5

10bg

However, in all my grids, in various applications, always gives the error:

Uncaught TypeError: Cannot read property 'hasCls' of null
OverridePluginRowExpander.js?_dc=1448021242426:16

I tested with console.log and strangely the last row is always null

Any idea that can help solve this?

Thanks in advance


Ext.define('test.ux.grid.OverridePluginRowExpander', {
alias: 'plugin.overriderowexpander',
extend: 'Ext.grid.plugin.RowExpander',

isCollapsed: function (rowIdx) {
var me = this,
rowNode = me.view.getNode(rowIdx),
row = Ext.fly(rowNode, '_rowExpander');
console.log(rowNode);
console.log(row);

return row.hasCls(me.rowCollapsedCls);

},

collapse: function (rowIdx) {
if (this.isCollapsed(rowIdx) == false) {
this.toggleRow(rowIdx, this.grid.getStore().getAt(rowIdx));
}
},

collapseAll: function () {
for (i = 0; i < this.grid.getStore().getTotalCount(); i++) {
this.collapse(i);
}
},




expand: function (rowIdx) {
if (this.isCollapsed(rowIdx) == true) {
this.toggleRow(rowIdx, this.grid.getStore().getAt(rowIdx));
}
},

expandAll: function () {
for (i = 0; i < this.grid.getStore().getTotalCount(); i++) {
this.expand(i);
}
}

});

Solved:
My grid has a paging bar.

I change: for (i = 0; i < this.grid.getStore().getTotalCount(); i++) {

by: for (i = 0; i < this.grid.getStore().getPageSize(); i++) {

Now works great.
Thanks.