PDA

View Full Version : Grids: CollapseAllGroups & ExpandAllGroups



gma990
11 Aug 2011, 11:36 PM
Hello,

In ExtJs 3.x, it was possible to collapse/expand all groups in grids with Ext.grid.GroupingView.collapseAllGroups / expandAllGroups.

I just don't find how to do the same with ExtJs 4.

Will you show me how to solve this problem please ?

Regards,
Geoffroy

skirtle
12 Aug 2011, 6:55 AM
I couldn't find a direct replacement but this seems to work, albeit using undocumented methods:


var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {name} ({rows.length})',
startCollapsed: true
});

Ext.create('Ext.grid.Panel', {
features: [groupingFeature],
...
tbar: [
{
text: 'Expand All',
handler: function() {
var rows = groupingFeature.view.getEl().query('.x-grid-group-body');

Ext.each(rows, function(row) {
groupingFeature.expand(Ext.get(row));
});
}
}, {
text: 'Collapse All',
handler: function() {
var rows = groupingFeature.view.getEl().query('.x-grid-group-body');

Ext.each(rows, function(row) {
groupingFeature.collapse(Ext.get(row));
});
}
}
]
});

HTK
16 Aug 2011, 1:56 AM
You can use this override to get this work:


Ext.override(Ext.grid.feature.Grouping, {
collapseAll: function() {
var self = this, view = self.view;
view.el.query('.x-grid-group-hd').forEach(function (group) {
var group_body = Ext.fly(group.nextSibling, '_grouping');
self.collapse(group_body);
});
},

expandAll: function() {
var self = this, view = self.view;
view.el.query('.x-grid-group-hd').forEach(function (group) {
var group_body = Ext.fly(group.nextSibling, '_grouping');
self.expand(group_body);
});
}
});

gma990
17 Aug 2011, 12:55 PM
Thank you for your answers.

jamesdesouza
22 Sep 2011, 2:31 AM
Hi,
I get error on IE8

Object does not support this property or method
on line

view.el.query('.x-grid-group-hd').forEach(function (group) {

it works fine on ff.
how can I solve IE problem?

Edit:

my solution


Ext.override(Ext.grid.feature.Grouping, { collapseAll: function() { var self = this, groups = this.view.el.query('.x-grid-group-body'); Ext.Array.forEach(groups, function (group) { var g = Ext.get(group.id); self.collapse(g); }); },
expandAll: function() { var self = this, groups = this.view.el.query('.x-grid-group-body'); Ext.Array.forEach(groups, function (group) { var g = Ext.get(group.id); self.expand(g); }); }});

traxanos
22 Sep 2011, 4:06 AM
it is not good to use '.x-grid-group-hd' directly. because sometime the class is different. use instead the self.eventSelector for query.



Ext.override(Ext.grid.feature.Grouping, {
collapseAll: function() {
var self = this, view = self.view;
view.el.query(self.eventSelector).forEach(function (group) {
var group_body = Ext.fly(group.nextSibling, '_grouping');
self.collapse(group_body);
});
},

expandAll: function() {
var self = this, view = self.view;
view.el.query(self.eventSelector).forEach(function (group) {
var group_body = Ext.fly(group.nextSibling, '_grouping');
self.expand(group_body);
});
}
});

GeorgeHernandez
7 Apr 2012, 8:32 AM
This work around hack has been in the forum since 2011-08, but we still need to hack it into extjs-4.1.0-rc2?! Hopefully it will be built in extjs-4.1 proper! Please?

Tod
28 Sep 2012, 7:47 AM
Yes...where is this feature? A collapsed grouping is a very convenient summary

Sreekesh S K
28 Sep 2012, 3:34 PM
Hi Team,

I just need to collapse a 'hbox' grid to left side.

When I try to add 'collapsible' as true for that grid, it just collapse to the top of the window only.


The code is as follows:

title: 'XXX',
layout: 'hbox',
layoutConfig: {
align: 'stretch'
},
items: [{
id: 'xxx-left-grid',
flex: 1,
loadMask: true,
viewConfig: {
forceFit: true
},
xtype: 'grid',
collapsible: true,
store: queueExtensionStore,
//hideHeaders: true,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
cm: new Ext.grid.ColumnModel({
columns: [{
id: 'extension',
header: 'Extension',
dataIndex: 'extension',
width: newWidth - 4
}]
}),
listeners: {
rowclick: function (obj, index) {
var ext_id = Ext.getCmp('extension-left-grid').getSelectionModel().getSelected().get("extension_id");
extensionDnisStore.baseParams.id = ext_id;
extensionDnisStore.load();
}
}
}, {
id: 'assigned-dnis-grid',
flex: 1,
loadMask: true,
viewConfig: {
forceFit: true
},
xtype: 'grid',
store: extensionDnisStore,
//hideHeaders: true,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
cm: new Ext.grid.ColumnModel({
columns: [{
id: 'dnis',
header: 'DNIS',
dataIndex: 'dnis',
width: newWidth - 4
}]
})
}]


I just need to collapse the grid 'xxx-left-grid' to the left side when page loads and also able to collapse and release it as per the need..

Can any one pls help