[4.1 RC3] Grouping expand() not working

[slemmon]

REQUIRED INFORMATION Ext version tested:

• Ext 4.1 rev RC3

Browser versions tested against:

• IE8
• FF9.0.1 (firebug 1.8.4 installed)

DOCTYPE tested against:

• strict

Description:

• The grouping feature's expand() method does not work. No errors. The same example script works fine in 4.1 RC1.

Steps to reproduce the problem:

• Make a grid with the grouping feature (I used the grouping example from the SDK). Programatically attempt to expand a row by groupName or group header element.

The result that was expected:

• The group should expand within the grid.

The result that occurs instead:

• The group does not expand and no error is fired.

Test Case:

 Ext.define('Restaurant', {
    extend: 'Ext.data.Model',
    fields: ['name', 'cuisine']
});

var Restaurants = Ext.create('Ext.data.Store', {
    storeId: 'restaraunts',
    model: 'Restaurant',
    groupField: 'cuisine',
    sorters: ['cuisine','name'],
    data: [{
        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: 'Cafe Renzo',
        cuisine: 'Italian'
    },{
        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'
    }]
});

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
    groupHeaderTpl: 'Cuisine: {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],
    tbar: [{
        text: 'Expand American'
        , handler: function (btn) {
            var myGroup = btn.up('gridpanel').getView().getFeature('restaurantGrouping');
            myGroup.expand('American');
        }
    }],
    columns: [{
        text: 'Name',
        flex: 1,
        dataIndex: 'name'
    },{
        text: 'Cuisine',
        flex: 1,
        dataIndex: 'cuisine'
    }],
    fbar  : ['->', {
        text:'Clear Grouping',
        iconCls: 'icon-clear-group',
        handler : function(){
            groupingFeature.disable();
        }
    }]
});

HELPFUL INFORMATION Screenshot or Video:

• none

See this URL for live test case: n/a Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• WinXP Pro

[slemmon]

Forgot to mention - works fine in 4.1 RC1.

[Animal]

expand() works if you don't use startCollapsed: true

It's not setting the collapsed flag for the groups, so it is not proceeding with the expand.

I'll investigate whether the collapsed flags were ever set initially, or whether the test of the collapsed flag before proceeding with expand is a new test.

[Animal]

Yes the test is new. We never set the collapsedState[groupName] flags if startCollapsed is true.

[slemmon]

Are there plans to set the groups' flags to collapsed when the initial startCollapsed config is used?

[Animal]

Try this.

Ext.define('Ext.overrides.Grouping', {
    override: 'Ext.grid.feature.Grouping',

    getGroupRows: function(group, records, preppedRecords, fullWidth) {
        var me = this,
            children = group.children,
            rows = group.rows = [],
            view = me.view,
            header = me.getGroupedHeader(),
            groupField = me.getGroupField(),
            index = -1,
            r,
            rLen = records.length,
            record;
            
        me.collapsedState[group.name] = me.startCollapsed;
            
        group.viewId = view.id;

        for (r = 0; r < rLen; r++) {
            record = records[r];

            if (record.get(groupField) == group.name) {
                index = r;
            }
            if (Ext.Array.indexOf(children, record) != -1) {
                rows.push(Ext.apply(preppedRecords[r], {
                    depth : 1
                }));
            }
        }

        group.groupHeaderId = me.getGroupHeaderId(group.name);
        group.groupBodyId = me.getGroupBodyId(group.name);
        group.fullWidth = fullWidth;
        group.columnName = header ? header.text : groupField;
        group.groupValue = group.name;

        // Here we attempt to overwrite the group name value from the Store with
        // the get the rendered value of the column from the *prepped* record
        if (header && index > -1) {
            group.name = group.renderedValue = preppedRecords[index][header.id];
        }
        if (me.collapsedState[group.name]) {
            group.collapsedCls = me.collapsedCls;
            group.hdCollapsedCls = me.hdCollapsedCls;
        }

        return group;
    }
});

[slemmon]

Oh, ok. I can give that a shot. I had just done this to get around it:

, listeners: {
    viewready: function (grid) {
        grid.getView().getFeature('locationGrouping').collapseAll()
    }
}

[slemmon]

Looks like this is fixed in 4.1.1 RC1 (or before).
Is it possible to mark this thread as Fixed?

[reweiner]

It looks like it's not fixed in 4.1.3 yet.

I tried 'slemmon' solution and it was the only way you don't have to click twice on a collapsed group.