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

**m.zeug** · 23 Aug 2012 10:57 PM

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 &amp; Bar","cuisine":"Caribbean"},{"name":"Rose &amp; 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

**mitchellsimoens** · 24 Aug 2012 6:28 AM

Thanks for the report!

**marksdean** · 29 Aug 2012 10:04 AM

Is there a work-around?

**m.zeug** · 29 Aug 2012 10:44 PM

Code:

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

Kinda dirty, but worked for me...

**Daniil** · 26 Dec 2012 7:24 AM

Hello ExtJS team,

Could you clarify it is slated for 4.2 final?

The issue is reproducible with 4.2 beta.

**Gareth Smith** · 22 Jan 2013 9:00 AM

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

**tbonci** · 6 Feb 2013 11:51 AM

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;
   }
});

**Daniil** · 6 Feb 2013 10:10 PM

Hi @tbonci,

Thank you for sharing your experience!

I think we all hope it will be fixed in 4.2

**meyersd** · 26 Mar 2013 11:16 AM

I have upgraded to 4.2 and this issue is not fixed

**Steferson Patake** · 4 Apr 2013 8:35 AM

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

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

Thread Tools

Search Thread

Display

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

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

re: startCollapsed not working.

re: startCollapsed not working.

Workaround

Workaround

Possible workaround

Possible workaround