Hybrid View

    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,327
    Vote Rating
    850
    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
    975
    Vote Rating
    110
    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.