add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / grid / GroupedGrid.js

/**\r
 * This example illustrates how to use the grouping feature of the Grid.\r
 */\r
Ext.define('KitchenSink.view.grid.GroupedGrid', {\r
    extend: 'Ext.grid.Panel',\r
    xtype: 'grouped-grid',\r
    requires: [\r
        'Ext.grid.feature.Grouping'\r
    ],\r
    collapsible: true,\r
    frame: true,\r
    width: 600,\r
    height: 400,\r
\r
    // Need a minHeight. Neptune resizable framed panels are overflow:visible so as to\r
    // enable resizing handles to be embedded in the border lines.\r
    minHeight: 200,\r
    title: 'Restaurants',\r
    resizable: true,\r
\r
    features: [{\r
        ftype: 'grouping',\r
        groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',\r
        hideGroupedHeader: true,\r
        startCollapsed: true,\r
        id: 'restaurantGrouping'\r
    }],\r
    //<example>\r
    otherContent: [{\r
        type: 'Store',\r
        path: 'classic/samples/store/Restaurants.js'\r
    },{\r
        type: 'Model',\r
        path: 'classic/samples/model/Restaurant.js'\r
    }],\r
    profiles: {\r
        classic: {\r
        },\r
        neptune: {\r
        }\r
    },\r
    //</example>\r
\r
    initComponent: function() {\r
        this.store = new KitchenSink.store.Restaurants();\r
        this.columns = [{\r
            text: 'Name',\r
            flex: 1,\r
            dataIndex: 'name'\r
        },{\r
            text: 'Cuisine',\r
            flex: 1,\r
            dataIndex: 'cuisine'\r
        }];\r
\r
        this.callParent();\r
\r
        var store = this.getStore(),\r
            toggleMenu = [];\r
\r
        this.groupingFeature = this.view.getFeature('restaurantGrouping');\r
\r
        // Create checkbox menu items to toggle associated group\r
        store.getGroups().each(function(group) {\r
            toggleMenu.push({\r
                xtype: 'menucheckitem',\r
                text: group.getGroupKey(),\r
                handler: this.toggleGroup,\r
                scope: this\r
            });\r
        }, this);\r
\r
        this.addDocked([{\r
            xtype: 'toolbar',\r
            items: ['->', {\r
                text: 'Toggle groups...',\r
                destroyMenu: true,\r
                menu: toggleMenu\r
            }]\r
        }, {\r
            xtype: 'toolbar',\r
            ui: 'footer',\r
            dock: 'bottom',\r
            items: ['->', {\r
                text:'Clear Grouping',\r
                iconCls: 'icon-clear-group',\r
                scope: this,\r
                handler: this.onClearGroupingClick\r
            }]\r
        }]);\r
\r
        this.mon(this.store, 'groupchange', this.onGroupChange, this);\r
        this.mon(this.view, {\r
            groupcollapse: this.onGroupCollapse,\r
            groupexpand: this.onGroupExpand,\r
            scope: this\r
        });\r
    },\r
\r
    onClearGroupingClick: function(){\r
        this.groupingFeature.disable();\r
    },\r
\r
    toggleGroup: function(item) {\r
        var groupName = item.text;\r
        if (item.checked) {\r
            this.groupingFeature.expand(groupName, true);\r
        } else {\r
            this.groupingFeature.collapse(groupName, true);\r
        }\r
    },\r
\r
    onGroupChange: function(store, grouper) {\r
        var grouped = store.isGrouped(),\r
            groupBy = grouper ? grouper.getProperty() : '',\r
            toggleMenuItems, len, i = 0;\r
\r
        // Clear grouping button only valid if the store is grouped\r
        this.down('[text=Clear Grouping]').setDisabled(!grouped);\r
\r
        // Sync state of group toggle checkboxes\r
        if (grouped && groupBy === 'cuisine') {\r
            toggleMenuItems = this.down('button[text=Toggle groups...]').menu.items.items;\r
            for (len = toggleMenuItems.length; i < len; i++) {\r
                toggleMenuItems[i].setChecked(\r
                    this.groupingFeature.isExpanded(toggleMenuItems[i].text)\r
                );\r
            }\r
            this.down('[text=Toggle groups...]').enable();\r
        } else {\r
            this.down('[text=Toggle groups...]').disable();\r
        }\r
    },\r
\r
    onGroupCollapse: function(v, n, groupName) {\r
        if (!this.down('[text=Toggle groups...]').disabled) {\r
            this.down('menucheckitem[text=' + groupName + ']').setChecked(false, true);\r
        }\r
    },\r
\r
    onGroupExpand: function(v, n, groupName) {\r
        if (!this.down('[text=Toggle groups...]').disabled) {\r
            this.down('menucheckitem[text=' + groupName + ']').setChecked(true, true);\r
        }\r
    }\r
});\r