PDA

View Full Version : Grouping Grid startCollapsed Issues/Bug?



expensior
16 Sep 2012, 11:14 PM
extjs 4.1.1

We are currenty facing a major problem in our application. We are using a grouped grid to display data records but after tinkering for a while we feel there is a need to start the groups collapsed to reduce initial rendering times and keep the site compact.

Now the problem is that the groupingFeature - startCollapsed property has absolutely no effect on the grid when processing data first and then using add or load methods to get the data to the store. The grid is always expanded after add or load despite startCollapsed:true.

I tried to get around this somehow by suspending events while adding processed data but nothing worked even calling explicitly groupingFeature.collapseAll() directly after adding did not collapse it unless I refreshed the grid view between adding and collapsing.

I have no idea right now how to get around this, using a proxy to get that data into the store does not seem a good fit for us in this case.
I am also confused why add or load would expand the grid or ignore the startCollapsed attribute.

simplified code version


//the configuration item grid store
configStore = Ext.create('Ext.data.Store', {
model: 'Config',
groupField: 'label',
groupDir: 'ASC',
sorters: [
{
property: 'hierarchyType',
direction: 'DESC'
},
{
property: 'nameDomain',
direction: 'ASC'
},
{
property: 'configKeyLabel',
direction: 'ASC'
},
{
property: 'statutoryIdentifier',
direction: 'ASC'
},
{
property: 'countryCode',
direction: 'ASC'
},
{
property: 'startDate',
direction: 'DESC'
}
]
});

//the configuration item grid grouping feature
groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{name} : {[getRecordsNumbers(values.rows)]} <input type="image" id="button.{[getRecordClassName(values.name)]}" style="float:right; border:0;" size="15" src="icons/add.png" value="{[getRecordClassName(values.name)]}" onClick="addConfBlock(this);">',
enableNoGroups: false,
hideGroupHeader: true,
startCollapsed: true
});

//the configuration item grid
confGrid = Ext.create('Ext.grid.Panel', {
store: configStore,
animCollapse: false,
forceFit: true,
border: false,
autoScroll: true,
viewConfig: {
loadMask: false,
getRowClass: function (record, index) {
if (record.data.isDefaultSystem == true) {
return 'defaultSystemRow';
}
if (!record) {
return '';
}
if (record.data.isDummy == true) {
return 'dummyRow';
}

}
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
cls: 'helpTextToolBar',
items: [
{
xtype: 'tbspacer',
flex:1
},{
xtype: 'button',
id: 'expandAllTopToggle',
iconCls: 'expandGroupsIcon',
iconAlign: 'right',
text: '',
handler: function () {
groupingFeature.expandAll(); ;
}
}, {
xtype: 'button',
id: 'collapseAllTopToggle',
iconCls: 'collapseGroupsIcon',
iconAlign: 'right',
text: '',
handler: function () {
groupingFeature.collapseAll();
}
}]
},
{
xtype: 'toolbar',
dock: 'bottom',
cls: 'helpTextToolBar',
items: [
{
xtype: 'tbspacer',
flex:1
},
{
xtype: 'button',
id: 'expandAllBotToggle',
iconCls: 'expandGroupsIcon',
iconAlign: 'right',
text: '',
handler: function () {
groupingFeature.expandAll();
}
}, {
xtype: 'button',
id: 'collapseAllBotToggle',
iconCls: 'collapseGroupsIcon',
iconAlign: 'right',
text: '',
handler: function () {
groupingFeature.collapseAll();
}
}]
}],
features: [
groupingFeature,
{
ftype: 'rowbody',
getAdditionalData: function (data, idx, record, orig) {
var result = {};
if (record.data.isDummy == true) {
result = {
rowBody: '',
rowBodyCls: this.rowBodyCls,
rowBodyColspan: this.view.headerCt.getColumnCount() // span all colums
};
}
return result;
}
}]
});

function populateConfigItemBlocks(confItemBlocks){
//process data and create model record array

//load data array into configStore
configStore.loadRawData(configs);
//now the confGrid is expanded despite startCollapsed:true and I have to call "groupingFeature.collapseAll()" which hurts performance
};

ShadowZero3000
17 Sep 2012, 8:57 AM
I have noticed the same issue. It does not appear that the 'startCollapsed' functionality is working as intended.

expensior
18 Sep 2012, 3:56 AM
any idea how to solve this ?

delusion
26 Sep 2012, 11:42 AM
I am having the same issue, with 4.1.1 and 4.1.2



var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
id: 'groupingFeature'
,groupHeaderTpl: '{name} ({rows.length} item{[values.rows.length > 1 ? "s" : ""]})'
,ftype: 'groupingsummary'
,startCollapsed: true
});

var data_grid = Ext.create('Ext.grid.Panel', {
id: id
,autoScroll: true
,title:title
,store: DStore
,columns: getGridColumns()
,stateful: false
,features: [groupingFeature]
,viewConfig: {
stripeRows: true
,forceFit: true
,loadMask: false
}
});

Daniil
26 Sep 2012, 1:59 PM
Hi all,



I tried to get around this somehow by suspending events while adding processed data but nothing worked even calling explicitly groupingFeature.collapseAll() directly after adding did not collapse it unless I refreshed the grid view between adding and collapsing.


I think this is related to:
www.sencha.com/forum/showthread.php?199925

expensior
27 Sep 2012, 12:17 AM
The solution in that link does not work for me at all in 4.1

I noticed while debugging that in ext-all-debug.js in the grouping feature collectData method that the condition


if (me.startCollapsed) {


me.startCollapsed = false;
collapseGroups = true;
}



me.startCollapsed is always false, even when I set startCollapsed=true or override startCollapsed to true. This means that collapseGroups always remains undefined and later conditions are never met?

my main issue is still that startCollapsed attribute has no effect on my groups. It works in the documentation example where the store fills its data directly from the configured proxy but when I use store.add([processedData]) it simply ignores the startCollapsed attribute

Daniil
27 Sep 2012, 5:01 AM
It looks like a bug. I would suggest you to post a bug report in the Bugs forums.

Georgi Yankov
20 May 2013, 7:39 AM
I'm using Ext JS 4.0.7

I use Grouping Grid and startCollapsed = true. Everything works fine, I mean that the groups initially are collapsed. The problem starts when I try to sort by a column as then all of the groups get always collapsed. No matter that I could manually expand several of them, they all would get collapsed.

This issue bothers me a lot and I wonder if there is a workaround for it?

Thank you in advance!

muselmanach
9 Sep 2013, 10:46 PM
i have the same problem. after filtering my store the grouping grid expands all results.
is there already a solution for this problem?
need this working very urgent.

thx
muselmanach

mixo
21 Oct 2014, 8:16 PM
Hi folks!
it seems this is a bug and also in extjs 5.0!
Because I set


grouping.startCollapsed = true;

after init grid and then call


store.loadData(...)

and it's displayed collapsed!
That's not happened when in feature config I set


startCollapsed: true,