[OPEN] [4.1.1] Ext.grid.feature.Grouping - startCollapsed not working with remote data

1 Attachment(s)

[4.1.1] Ext.grid.feature.Grouping - startCollapsed not working with remote data

REQUIRED INFORMATION

Ext version tested:
Ext 4.1.1

Browser versions tested against:
Chrome 21

IE9

FF14

DOCTYPE tested against:
<!DOCTYPE html>

Description:
Ext.grid.feature.Grouping - startCollapsed is not working if the grid's store asynchronously loads its data

Steps to reproduce the problem:
Create a grid with Ext.grid.feature.Grouping and startCollapsed: true

Configure the grid's store to load its data using an ajax proxy

The result that was expected:
All groups are rendered collapsed after the data was loaded

The result that occurs instead:
All groups are rendered expanded

Test Case:

Code:

Ext.require(['Ext.data.*', 'Ext.grid.*']); Ext.onReady(function() { // wrapped in closure to prevent global vars. Ext.define('Restaurant', { extend: 'Ext.data.Model', fields: ['name', 'cuisine'] }); var restaurants = Ext.create('Ext.data.Store', { autoLoad: true, storeId: 'restaraunts', model: 'Restaurant', groupField: 'cuisine', sorters: ['cuisine','name'], proxy: { type: 'ajax', url: 'groupgrid.json', reader: { type: 'json' } } }); var groupingFeature = Ext.create('Ext.grid.feature.Grouping', { groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})', hideGroupedHeader: true, startCollapsed: true, id: 'restaurantGrouping' }); var grid = Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), collapsible: true, iconCls: 'icon-grid', frame: true, store: restaurants, width: 600, height: 400, title: 'Restaurants', resizable: true, features: [groupingFeature], columns: [{ text: 'Name', flex: 1, dataIndex: 'name' },{ text: 'Cuisine', flex: 1, dataIndex: 'cuisine' }] }); });

groupgrid.json:

Code:

[{"name":"Cheesecake Factory","cuisine":"American"},{"name":"University Cafe","cuisine":"American"},{"name":"Slider Bar","cuisine":"American"},{"name":"Shokolaat","cuisine":"American"},{"name":"Gordon Biersch","cuisine":"American"},{"name":"Crepevine","cuisine":"American"},{"name":"Creamery","cuisine":"American"},{"name":"Old Pro","cuisine":"American"},{"name":"Nola's","cuisine":"Cajun"},{"name":"House of Bagels","cuisine":"Bagels"},{"name":"The Prolific Oven","cuisine":"Sandwiches"},{"name":"La Strada","cuisine":"Italian"},{"name":"Buca di Beppo","cuisine":"Italian"},{"name":"Pasta?","cuisine":"Italian"},{"name":"Madame Tam","cuisine":"Asian"},{"name":"Sprout Cafe","cuisine":"Salad"},{"name":"Pluto's","cuisine":"Salad"},{"name":"Junoon","cuisine":"Indian"},{"name":"Bistro Maxine","cuisine":"French"},{"name":"Three Seasons","cuisine":"Vietnamese"},{"name":"Sancho's Taquira","cuisine":"Mexican"},{"name":"Reposado","cuisine":"Mexican"},{"name":"Siam Royal","cuisine":"Thai"},{"name":"Krung Siam","cuisine":"Thai"},{"name":"Thaiphoon","cuisine":"Thai"},{"name":"Tamarine","cuisine":"Vietnamese"},{"name":"Joya","cuisine":"Tapas"},{"name":"Jing Jing","cuisine":"Chinese"},{"name":"Patxi's Pizza","cuisine":"Pizza"},{"name":"Evvia Estiatorio","cuisine":"Mediterranean"},{"name":"Cafe 220","cuisine":"Mediterranean"},{"name":"Cafe Renaissance","cuisine":"Mediterranean"},{"name":"Kan Zeman","cuisine":"Mediterranean"},{"name":"Gyros-Gyros","cuisine":"Mediterranean"},{"name":"Mango Caribbean Cafe","cuisine":"Caribbean"},{"name":"Coconuts Caribbean Restaurant & Bar","cuisine":"Caribbean"},{"name":"Rose & Crown","cuisine":"English"},{"name":"Baklava","cuisine":"Mediterranean"},{"name":"Mandarin Gourmet","cuisine":"Chinese"},{"name":"Bangkok Cuisine","cuisine":"Thai"},{"name":"Darbar Indian Cuisine","cuisine":"Indian"},{"name":"Mantra","cuisine":"Indian"},{"name":"Janta","cuisine":"Indian"},{"name":"Hyderabad House","cuisine":"Indian"},{"name":"Starbucks","cuisine":"Coffee"},{"name":"Peet's Coffee","cuisine":"Coffee"},{"name":"Coupa Cafe","cuisine":"Coffee"},{"name":"Lytton Coffee Company","cuisine":"Coffee"},{"name":"Il Fornaio","cuisine":"Italian"},{"name":"Lavanda","cuisine":"Mediterranean"},{"name":"MacArthur Park","cuisine":"American"},{"name":"St Michael's Alley","cuisine":"Californian"},{"name":"Osteria","cuisine":"Italian"},{"name":"Vero","cuisine":"Italian"},{"name":"Cafe Renzo","cuisine":"Italian"},{"name":"Miyake","cuisine":"Sushi"},{"name":"Sushi Tomo","cuisine":"Sushi"},{"name":"Kanpai","cuisine":"Sushi"},{"name":"Pizza My Heart","cuisine":"Pizza"},{"name":"New York Pizza","cuisine":"Pizza"},{"name":"California Pizza Kitchen","cuisine":"Pizza"},{"name":"Round Table","cuisine":"Pizza"},{"name":"Loving Hut","cuisine":"Vegan"},{"name":"Garden Fresh","cuisine":"Vegan"},{"name":"Cafe Epi","cuisine":"French"},{"name":"Tai Pan","cuisine":"Chinese"}]

HELPFUL INFORMATION

Debugging already done:
Seems like the problem is caused due to the way startCollapsed is handled in the feature's collectData method:
src/grid/feature/Grouping.js, line 878:

Code:

if (me.startCollapsed) { // If we start collapse, we'll set the state of the groups here // and unset the flag so any subsequent expand/collapse is // managed by the feature me.startCollapsed = false; collapseGroups = true; }

The grid's view calls this method before the store actually loaded the data. After the store finished loading the data, startCollapsed is already set to false and therefore the groups are rendered expanded.

The same problem occurs if "startCollapsed: true" is added to the "Grouping with Remote Summary" example

Additional CSS used:
default ext-all.css

examples/shared/example.css

Operating System:
Windows 7

Thanks for the report!

re: startCollapsed not working.

Is there a work-around?

Workaround

Code:

grid.getView().on({ 'beforerefresh': function() { return false; }, single: true });

Kinda dirty, but worked for me...

Hello ExtJS team,

Could you clarify it is slated for 4.2 final?

The issue is reproducible with 4.2 beta.

It is important to me, also, that this issue is fixed.

Possible workaround

I've found that just commenting out the flag reset in an override fixes everything and from my very brief testing doesn't break any functionality. However, I didn't delve too deep down the rabbit hole.

Code:

Ext.override(Ext.grid.feature.Grouping, { collectData: function(records, preppedRecords, startIndex, fullWidth, o) { var me = this, store = me.view.store, collapsedState = me.collapsedState, collapseGroups, g, groups, gLen, group; if (me.startCollapsed) { // If we start collapse, we'll set the state of the groups here // and unset the flag so any subsequent expand/collapse is // managed by the feature // me.startCollapsed = false; collapseGroups = true; } if (!me.disabled && store.isGrouped()) { o.rows = groups = store.getGroups(); gLen = groups.length; for (g = 0; g < gLen; g++) { group = groups[g]; if (collapseGroups) { collapsedState[group.name] = true; } me.getGroupRows(group, records, preppedRecords, fullWidth); } } return o; } });

Hi @tbonci,

Thank you for sharing your experience!

I think we all hope it will be fixed in 4.2 :)

I have upgraded to 4.2 and this issue is not fixed :(

Hello,

i was experiencing the same issue, but i came with this workaround:

the store its nothing special:

Code:

var storeOpcoesAcesso = Ext.create('Ext.data.JsonStore', { ... groupField: 'descricao', autoLoad: true, ... });

defining the groupingfeature before the form:

Code:

var groupingFeature = Ext.create('Ext.grid.feature.Grouping', { groupHeaderTpl: '{name} ({rows.length} Ite{[values.rows.length > 1 ? "ns" : "m"]})', hideGroupedHeader: true, startCollapsed: true, id: 'acessosGrouping' });

attaching to the grid, nothing special at this point:

Code:

{ xtype: 'gridpanel', selModel: sm, store: storeOpcoesAcesso, features: [groupingFeature], ... }

but the trick was on the form panel, like this:

Code:

var formPanel = Ext.create('Ext.form.Panel', { ... listeners: { afterlayout: function(){ groupingFeature.collapseAll(); } }, ... });

the result was after the form panel did the layout procedure, the groupingFeature.collapseAll() function collapsed all the group itens of my grid.

Hope this helps to someone.

Hugs