Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-7082 in 4.2.1.883.
  1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    7
    Vote Rating
    3
    m.zeug is on a distinguished road

      2  

    Default [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


    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
    Attached Files

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report!

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    marksdean is on a distinguished road

      0  

    Default re: startCollapsed not working.

    re: startCollapsed not working.


    Is there a work-around?

  4. #4
    Sencha User
    Join Date
    May 2009
    Posts
    7
    Vote Rating
    3
    m.zeug is on a distinguished road

      0  

    Default Workaround

    Workaround


    Code:
    grid.getView().on({
        'beforerefresh': function() {
            return false;
        },
        single: true
    });
    Kinda dirty, but worked for me...

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    112
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Hello ExtJS team,

    Could you clarify it is slated for 4.2 final?

    The issue is reproducible with 4.2 beta.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    9
    Vote Rating
    0
    Gareth Smith is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha Premium Member
    Join Date
    Aug 2011
    Posts
    8
    Vote Rating
    0
    tbonci is on a distinguished road

      0  

    Default Possible workaround

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

  8. #8
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    112
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Hi @tbonci,

    Thank you for sharing your experience!

    I think we all hope it will be fixed in 4.2
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  9. #9
    Ext GWT Premium Member
    Join Date
    Dec 2008
    Location
    Milwaukee
    Posts
    33
    Vote Rating
    3
    meyersd is on a distinguished road

      0  

    Default


    I have upgraded to 4.2 and this issue is not fixed

  10. #10
    Sencha User
    Join Date
    Feb 2009
    Posts
    5
    Vote Rating
    3
    Steferson Patake is on a distinguished road

      1  

    Default


    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