列表-分组

app/controller/Global.js

@@ -9,8 +9,7 @@ Ext.define('uas.controller.Global', {
     namespace: 'uas',
 
     stores: [
-        'Navigation',
-        'Companies'
+        'Navigation'
     ],
 
     config: {

app/model/Restaurant.js

@@ -0,0 +1,12 @@
+Ext.define('uas.model.Restaurant', {
+    extend: 'uas.model.Base',
+
+    fields: [
+        'name',
+        'cuisine',
+        {
+            name: 'rating',
+            summary: 'average'
+        }
+    ]
+});

app/store/Restaurants.js

@@ -0,0 +1,280 @@
+Ext.define('uas.store.Restaurants', {
+    extend: 'Ext.data.Store',
+    alias: 'store.restaurants',
+    storeId: 'restaurants',
+
+    model: 'uas.model.Restaurant',
+
+    groupField: 'cuisine',
+    // sorters: ['cuisine','name'],
+
+    data: [{
+        name: 'Cheesecake Factory',
+        cuisine: 'American',
+        rating: 4
+    },{
+        name: 'University Cafe',
+        cuisine: 'American',
+        rating: 3
+    },{
+        name: 'Slider Bar',
+        cuisine: 'American',
+        rating: 5
+    },{
+        name: 'Shokolaat',
+        cuisine: 'American',
+        rating: 4
+    },{
+        name: 'Gordon Biersch',
+        cuisine: 'American',
+        rating: 3
+    },{
+        name: 'Crepevine',
+        cuisine: 'American',
+        rating: 5
+    },{
+        name: 'The Old Shoe',
+        cuisine: 'American',
+        rating: 1
+    },{
+        name: 'Creamery',
+        cuisine: 'American',
+        rating: 4
+    },{
+        name: 'Old Pro',
+        cuisine: 'American',
+        rating: 2
+    },{
+        name: 'Nola\'s',
+        cuisine: 'Cajun',
+        rating: 5
+    },{
+        name: 'House of Bagels',
+        cuisine: 'Bagels',
+        rating: 4
+    },{
+        name: 'The Prolific Oven',
+        cuisine: 'Sandwiches',
+        rating: 3
+    },{
+        name: 'La Strada',
+        cuisine: 'Italian',
+        rating: 5
+    },{
+        name: 'Buca di Beppo',
+        cuisine: 'Italian',
+        rating: 4
+    },{
+        name: 'Pasta?',
+        cuisine: 'Italian',
+        rating: 3
+    },{
+        name: 'Madame Tam',
+        cuisine: 'Asian',
+        rating: 5
+    },{
+        name: 'Sprout Cafe',
+        cuisine: 'Salad',
+        rating: 2
+    },{
+        name: 'Pluto\'s',
+        cuisine: 'Salad',
+        rating: 3
+    },{
+        name: 'Junoon',
+        cuisine: 'Indian',
+        rating: 5
+    },{
+        name: 'Bistro Maxine',
+        cuisine: 'French',
+        rating: 4
+    },{
+        name: 'Three Seasons',
+        cuisine: 'Vietnamese',
+        rating: 3
+    },{
+        name: 'Sancho\'s Taquira',
+        cuisine: 'Mexican',
+        rating: 5
+    },{
+        name: 'Reposado',
+        cuisine: 'Mexican',
+        rating: 4
+    },{
+        name: 'Siam Royal',
+        cuisine: 'Thai',
+        rating: 3
+    },{
+        name: 'Krung Siam',
+        cuisine: 'Thai',
+        rating: 5
+    },{
+        name: 'Thaiphoon',
+        cuisine: 'Thai',
+        rating: 2
+    },{
+        name: 'Tamarine',
+        cuisine: 'Vietnamese',
+        rating: 3
+    },{
+        name: 'Joya',
+        cuisine: 'Tapas',
+        rating: 5
+    },{
+        name: 'Jing Jing',
+        cuisine: 'Chinese',
+        rating: 4
+    },{
+        name: 'Patxi\'s Pizza',
+        cuisine: 'Pizza',
+        rating: 3
+    },{
+        name: 'Evvia Estiatorio',
+        cuisine: 'Mediterranean',
+        rating: 5
+    },{
+        name: 'Cafe 220',
+        cuisine: 'Mediterranean',
+        rating: 4
+    },{
+        name: 'Cafe Renaissance',
+        cuisine: 'Mediterranean',
+        rating: 3
+    },{
+        name: 'Kan Zeman',
+        cuisine: 'Mediterranean',
+        rating: 5
+    },{
+        name: 'Gyros-Gyros',
+        cuisine: 'Mediterranean',
+        rating: 4
+    },{
+        name: 'Mango Caribbean Cafe',
+        cuisine: 'Caribbean',
+        rating: 3
+    },{
+        name: 'Coconuts Caribbean Restaurant & Bar',
+        cuisine: 'Caribbean',
+        rating: 5
+    },{
+        name: 'Rose & Crown',
+        cuisine: 'English',
+        rating: 4
+    },{
+        name: 'Baklava',
+        cuisine: 'Mediterranean',
+        rating: 3
+    },{
+        name: 'Mandarin Gourmet',
+        cuisine: 'Chinese',
+        rating: 5
+    },{
+        name: 'Bangkok Cuisine',
+        cuisine: 'Thai',
+        rating: 4
+    },{
+        name: 'Darbar Indian Cuisine',
+        cuisine: 'Indian',
+        rating: 3
+    },{
+        name: 'Mantra',
+        cuisine: 'Indian',
+        rating: 5
+    },{
+        name: 'Janta',
+        cuisine: 'Indian',
+        rating: 4
+    },{
+        name: 'Hyderabad House',
+        cuisine: 'Indian',
+        rating: 3
+    },{
+        name: 'Starbucks',
+        cuisine: 'Coffee',
+        rating: 5
+    },{
+        name: 'Peet\'s Coffee',
+        cuisine: 'Coffee',
+        rating: 5
+    },{
+        name: 'Coupa Cafe',
+        cuisine: 'Coffee',
+        rating: 3
+    },{
+        name: 'Lytton Coffee Company',
+        cuisine: 'Coffee',
+        rating: 5
+    },{
+        name: 'Il Fornaio',
+        cuisine: 'Italian',
+        rating: 4
+    },{
+        name: 'Lavanda',
+        cuisine: 'Mediterranean',
+        rating: 3
+    },{
+        name: 'MacArthur Park',
+        cuisine: 'American',
+        rating: 5
+    },{
+        name: 'St Michael\'s Alley',
+        cuisine: 'Californian',
+        rating: 4
+    },{
+        name: 'Osteria',
+        cuisine: 'Italian',
+        rating: 3
+    },{
+        name: 'Vero',
+        cuisine: 'Italian',
+        rating: 5
+    },{
+        name: 'Cafe Renzo',
+        cuisine: 'Italian',
+        rating: 4
+    },{
+        name: 'Miyake',
+        cuisine: 'Sushi',
+        rating: 3
+    },{
+        name: 'Sushi Tomo',
+        cuisine: 'Sushi',
+        rating: 5
+    },{
+        name: 'Kanpai',
+        cuisine: 'Sushi',
+        rating: 4
+    },{
+        name: 'Pizza My Heart',
+        cuisine: 'Pizza',
+        rating: 3
+    },{
+        name: 'New York Pizza',
+        cuisine: 'Pizza',
+        rating: 5
+    },{
+        name: 'California Pizza Kitchen',
+        cuisine: 'Pizza',
+        rating: 4
+    },{
+        name: 'Round Table',
+        cuisine: 'Pizza',
+        rating: 3
+    },{
+        name: 'Loving Hut',
+        cuisine: 'Vegan',
+        rating: 5
+    },{
+        name: 'Garden Fresh',
+        cuisine: 'Vegan',
+        rating: 4
+    },{
+        name: 'Cafe Epi',
+        cuisine: 'French',
+        rating: 5
+    },{
+        name: 'Tai Pan',
+        cuisine: 'Chinese',
+        rating: 5
+    }]
+});

app/view/grid/basic/Panel.js

@@ -3,17 +3,26 @@ Ext.define('uas.view.grid.basic.Panel', {
     xtype: 'basic-grid',
     controller: 'basicgrid',
 
-
-    store: 'Companies',
     stateful: true,
     multiSelect: true,
     stateId: 'stateGrid',
     headerBorders: false,
 
+    viewModel: {
+        stores: {
+            companies: {
+                type: 'companies',
+                autoLoad: true,
+            }
+        }
+    },
+
     viewConfig: {
         enableTextSelection: true
     },
 
+    bind: '{companies}',
+
     columns: [{
         text: 'Company',
         flex: 1,

app/view/grid/grouped/Panel.js

@@ -0,0 +1,105 @@
+/**
+ * This example shows how to use the grouping feature of the Grid.
+ */
+Ext.define('uas.view.grid.grouped.Panel', {
+    extend: 'Ext.grid.Panel',
+    xtype: 'grouped-grid',
+    controller: 'grouped-grid',
+
+    bind: '{restaurants}',
+
+    columns: [{
+        text: 'Name',
+        dataIndex: 'name',
+        summaryType: 'count',
+        summaryRenderer: function(value, summaryData, dataIndex) {
+            return Ext.String.format('共有{0}条数据', value);
+        },
+        flex: 1
+    }, {
+        text: 'Cuisine',
+        dataIndex: 'cuisine',
+
+        flex: 1
+    }, {
+        text: 'Rating',
+        dataIndex: 'rating',
+        flex: 1
+    }],
+
+    features: [{
+        ftype: 'grouping',
+        startCollapsed: true,
+        groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
+    }, {
+        ftype: 'infoSummary',
+        dock: 'bottom'
+    }],
+
+    viewModel: {
+        data: {
+            groupBy: null
+        },
+        stores: {
+            restaurants: {
+                type: 'restaurants',
+                autoLoad: false,
+                listeners: {
+                    groupchange: 'onGroupChange',
+                    buffer: 100
+                }
+            }
+        }
+    },
+
+    viewConfig: {
+        listeners: {
+            groupcollapse: 'onGroupCollapse',
+            groupexpand: 'onGroupExpand'
+        }
+    },
+
+    tbar: ['->', {
+        xtype: 'tool',
+        type: 'plus',
+        handler: 'onExpandAll',
+        tooltip: 'Expand all groups',
+        bind: {
+            hidden: '{!groupBy}'
+        }
+    }, {
+        xtype: 'tool',
+        type: 'minus',
+        handler: 'onCollapseAll',
+        tooltip: 'Collapse all groups',
+        bind: {
+            hidden: '{!groupBy}'
+        }
+    // }, {
+    //     text: 'Toggle groups...',
+    //     reference: 'groupsBtn',
+
+    //     bind: {
+    //         disabled: '{!groupBy}'
+    //     },
+    //     destroyMenu: true,
+    //     menu: {
+    //         hideOnScroll: false,
+    //         items: []
+    //     }
+    }],
+
+    fbar: [{
+        text: 'Disable Grouping',
+        handler: 'onDisableGroupingClick',
+        bind: {
+            hidden: '{!groupBy}'
+        }
+    }, {
+        text: 'Enable Grouping',
+        handler: 'onEnableGroupingClick',
+        bind: {
+            hidden: '{groupBy}'
+        }
+    }]
+});

app/view/grid/grouped/PanelController.js

@@ -0,0 +1,97 @@
+Ext.define('uas.view.grid.grouped.PanelController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.grouped-grid',
+
+    init: function (view) {
+        this.groupingFeature = view.view.findFeature('grouping');
+    },
+
+    onDisableGroupingClick: function () {
+        this.groupingFeature.disable();
+    },
+
+    onEnableGroupingClick: function() {
+        this.groupingFeature.enable();
+    },
+
+    onCollapseAll: function () {
+        this.groupingFeature.collapseAll();
+    },
+
+    onExpandAll: function () {
+        this.groupingFeature.expandAll();
+    },
+
+    onGroupChange: function (store, grouper) {
+        var me = this,
+        //     groupingFeature = me.groupingFeature,
+            groupBy = grouper ? grouper.getProperty() : '',
+        //     groupsBtn = me.lookup('groupsBtn'),
+            vm = me.getViewModel();
+        //     groups, items, menu,
+        //     len, i;
+
+        // me.groupBy = groupBy;
+
+        if (vm) {
+            vm.set({
+                groupBy: groupBy
+            });
+        }
+
+        // if (groupBy) {
+        //     menu = groupsBtn.menu;
+
+        //     if (groupsBtn.groupBy !== groupBy) {
+        //         groupsBtn.groupBy = groupBy;
+        //         groups = store.getGroups();
+        //         items = [];
+
+        //         groups.each(function (group) {
+        //             items.push({
+        //                 xtype: 'menucheckitem',
+        //                 text: group.getGroupKey(),
+        //                 handler: 'onToggleGroup'
+        //             });
+        //         });
+
+        //         menu.removeAll(true);
+        //         if (items.length) {
+        //             menu.add(items);
+        //         }
+        //     }
+
+        //     items = menu.items.items;
+        //     for (i = 0, len = items.length; i < len; ++i) {
+        //         items[i].setChecked(groupingFeature.isExpanded(items[i].text));
+        //     }
+        // }
+    },
+
+    onToggleGroup: function (item) {
+        this.groupingFeature[item.checked ? 'expand' : 'collapse'](item.text, {
+            highlight: true
+        });
+    },
+
+    onGroupCollapse: function (v, n, groupName) {
+        this.syncGroup(groupName, false);
+    },
+
+    onGroupExpand: function (v, n, groupName) {
+        this.syncGroup(groupName, true);
+    },
+
+    syncGroup: function (groupName, state) {
+        // var groupsBtn = this.lookup('groupsBtn'),
+        //     items = groupsBtn.menu.items.items,
+        //     i;
+
+        // for (i = items.length; i-- > 0; ) {
+        //     if (items[i].text === groupName) {
+        //         items[i].setChecked(state, true);
+        //         break;
+        //     }
+        // }
+    }
+});

resources/json/navigation.json

@@ -30,6 +30,7 @@
             },
             {
                 "text": "分组列",
+                "target": "grouped-grid",
                 "leaf": true,
                 "iconCls": "x-fa fa-smile-o"
             },

ux/feature/InfoSummary.js

@@ -158,7 +158,6 @@ Ext.define('Ext.ux.feature.InfoSummary', {
         summaryRecord.commit(true);
         summaryRecord.isSummary = true;
  
-        console.log(summaryRecord);
         return summaryRecord;
     },