Results 1 to 3 of 3

Thread: Ext.feature.Grouping

  1. #1
    Sencha User
    Join Date
    Jun 2007
    Posts
    5
    Vote Rating
    0
      0  

    Default Answered: Ext.feature.Grouping

    Hello,

    I'm writing a large app.

    I'm using cards as layout to display different modules.

    Grouping feature doesn't display normally if some operations (store.getRange(), grid.getSelectionModel().getSelection()) are done in other gridPanel before rendering.

    Below, simple code to reproduce the issue and a screenshot.

    Thank you in advance for any help or advise.

    REQUIRED INFORMATION



    Ext version tested:
    • Ext 4.1.1
    Browser versions tested against:
    • Firefox 14 (firebug 1.10.0 installed)
    • Chrome 20
    Test Case:

    Code:
    Ext.define('Restaurant', {
        extend: 'Ext.data.Model',
        fields: ['name', 'cuisine']
    });
    
    
    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'
        }]
    });
    
    
    grid1 = Ext.create('Ext.grid.Panel', {
        title: 'Grid1',
        store: restaurants,
        columns: [{
            header: 'Name',
            dataIndex: 'name',
            sortable: true,
            menuDisabled: true,
            flex: 1
        },{
            header: 'Cuisine',
            dataIndex: 'cuisine',
            sortable: true,
            menuDisabled: true,
            flex: 1
        }],
        selModel: {
            mode: 'MULTI'
        },
        dockedItems: {
            xtype: 'toolbar',
            dock: 'top',
        items: [{
            text: 'Show Grid2',
            handler: function(){
                grid = this.up('grid');
                rows = grid.getSelectionModel().getSelection();
                this.up('tabpanel').setActiveTab(1);
            }
        }]
        }
    });
    
    
    grid2 = Ext.create('Ext.grid.Panel', {
        title: 'Grid2',
        store: restaurants,
        columns: [{
            header: 'Name',
            dataIndex: 'name',
            sortable: true,
            flex: 1
        },{
            header: 'Cuisine',
            dataIndex: 'cuisine',
            sortable: true,
            flex: 1
        }],
        features: [{
            ftype: 'grouping',
            groupHeaderTpl: '{name}',
            hideGroupedHeader: true,
            collapsible: false,
            startCollapsed: false
        }]
    });
    
    
    Ext.create('Ext.tab.Panel', {
        renderTo: Ext.getBody(),
        width: 600,
        height: 400,
        items: [grid1, grid2]
    });

    Screenshot or Video:
    screenshot_grouping.jpg

    Operating System:

    • Win 7

  2. It's caused because you're not using var statements.

    Code:
    Ext.define('Restaurant', {
        extend: 'Ext.data.Model',
        fields: ['name', 'cuisine']
    });
    
    Ext.require('*');
    
    Ext.onReady(function() {
    
        var restaurants = Ext.create('Ext.data.Store', {
            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'
            }]
        });
    
        var grid1 = Ext.create('Ext.grid.Panel', {
            title: 'Grid1',
            store: restaurants,
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                sortable: true,
                menuDisabled: true,
                flex: 1
            }, {
                header: 'Cuisine',
                dataIndex: 'cuisine',
                sortable: true,
                menuDisabled: true,
                flex: 1
            }],
            dockedItems: {
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                    text: 'Show Grid2',
                    handler: function() {
                        var grid = this.up('grid'),
                            rows = grid.getSelectionModel().getSelection();
                            
                        this.up('tabpanel').setActiveTab(1);
                    }
                }]
            }
        });
    
        var grid2 = Ext.create('Ext.grid.Panel', {
            title: 'Grid2',
            store: restaurants,
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                sortable: true,
                flex: 1
            }, {
                header: 'Cuisine',
                dataIndex: 'cuisine',
                sortable: true,
                flex: 1
            }],
            features: [{
                ftype: 'grouping',
                groupHeaderTpl: '{name}',
                hideGroupedHeader: true,
                collapsible: false,
                startCollapsed: false
            }]
        });
    
        var tabs = Ext.create('Ext.tab.Panel', {
            renderTo: Ext.getBody(),
            width: 600,
            height: 400,
            items: [grid1, grid2]
        });
    });
    If you don't use them, the variables become global. As such, you're overwriting either grid/rows at some point that is causing problems in the grid.

  3. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,237
    Answers
    757
    Vote Rating
    1015
      0  

    Default

    It's caused because you're not using var statements.

    Code:
    Ext.define('Restaurant', {
        extend: 'Ext.data.Model',
        fields: ['name', 'cuisine']
    });
    
    Ext.require('*');
    
    Ext.onReady(function() {
    
        var restaurants = Ext.create('Ext.data.Store', {
            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'
            }]
        });
    
        var grid1 = Ext.create('Ext.grid.Panel', {
            title: 'Grid1',
            store: restaurants,
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                sortable: true,
                menuDisabled: true,
                flex: 1
            }, {
                header: 'Cuisine',
                dataIndex: 'cuisine',
                sortable: true,
                menuDisabled: true,
                flex: 1
            }],
            dockedItems: {
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                    text: 'Show Grid2',
                    handler: function() {
                        var grid = this.up('grid'),
                            rows = grid.getSelectionModel().getSelection();
                            
                        this.up('tabpanel').setActiveTab(1);
                    }
                }]
            }
        });
    
        var grid2 = Ext.create('Ext.grid.Panel', {
            title: 'Grid2',
            store: restaurants,
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                sortable: true,
                flex: 1
            }, {
                header: 'Cuisine',
                dataIndex: 'cuisine',
                sortable: true,
                flex: 1
            }],
            features: [{
                ftype: 'grouping',
                groupHeaderTpl: '{name}',
                hideGroupedHeader: true,
                collapsible: false,
                startCollapsed: false
            }]
        });
    
        var tabs = Ext.create('Ext.tab.Panel', {
            renderTo: Ext.getBody(),
            width: 600,
            height: 400,
            items: [grid1, grid2]
        });
    });
    If you don't use them, the variables become global. As such, you're overwriting either grid/rows at some point that is causing problems in the grid.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #3
    Sencha User
    Join Date
    Jun 2007
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Thanks for your usefull reply.

    Actually, I'm able to write large applications Javascript Php MySql but I don't know properly use var !

    I have to review many of my scripts.

    Ext is great !

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •