列表-分页

app/view/grid/basic/Panel.js

@@ -1,7 +1,7 @@
 Ext.define('uas.view.grid.basic.Panel', {
     extend: 'Ext.grid.Panel',
     xtype: 'basic-grid',
-    controller: 'basicgrid',
+    controller: 'basic-grid',
 
     requires: [
         'uas.view.grid.basic.PanelController',

app/view/grid/basic/PanelController.js

@@ -5,7 +5,7 @@
  */
 Ext.define('uas.view.grid.basic.PanelController', {
     extend: 'Ext.app.ViewController',
-    alias: 'controller.basicgrid',
+    alias: 'controller.basic-grid',
 
     onApprove: function (grid, rowIndex, colIndex) {
         var rec = grid.getStore().getAt(rowIndex);

app/view/grid/paging/Panel.js

@@ -0,0 +1,62 @@
+Ext.define('uas.view.grid.paging.Panel', {
+    extend: 'Ext.grid.Panel',
+    xtype: 'paging-grid',
+    controller: 'basic-grid',
+
+    requires: [
+        'uas.view.grid.basic.PanelController',
+        'uas.data.Company',
+        'uas.model.Company',
+        'uas.store.Companies'
+    ],
+
+    store: {
+        type: 'companies',
+        pageSize: 10,
+        remoteSort: true
+    },
+    signTpl: '<span style="' +
+            'color:{value:sign(\'"red"\',\'"green"\')}"' +
+        '>{text}</span>',
+
+    columns: [{ 
+        text: 'Company',
+        dataIndex: 'name',
+
+        sortable: true,
+        flex: 1
+    },{
+        text: 'Price',
+        dataIndex: 'price',
+
+        sortable: true,
+        formatter: 'usMoney',
+        width: 75
+    },{
+        text: 'Change',
+        dataIndex: 'priceChange',
+
+        width: 80,
+        sortable: true,
+        renderer: 'renderChange'
+    },{
+        text: '% Change',
+        dataIndex: 'priceChangePct',
+
+        width: 75,
+        sortable: true,
+        renderer: 'renderPercent'
+    },{
+        text: 'Last Updated',
+        dataIndex: 'priceLastChange',
+
+        width: 85,
+        sortable: true,
+        formatter: 'date("m/d/Y")'
+    }],
+
+    bbar: {
+        xtype: 'pagingtoolbar',
+        displayInfo: true
+    }
+});

app/view/grid/summary/Panel.js

@@ -4,7 +4,8 @@ Ext.define('uas.view.grid.summary.Panel', {
 
     requires: [
         'uas.view.grid.summary.Summary1',
-        'uas.view.grid.summary.Summary2'
+        'uas.view.grid.summary.Summary2',
+        'uas.view.grid.summary.Summary3'
     ],
 
     items: [{
@@ -15,7 +16,7 @@ Ext.define('uas.view.grid.summary.Panel', {
         xtype: 'summary2'
     }, {
         title: '后台计算',
-        html: '需配合分页使用，待完善'
+        xtype: 'summary3'
     }]
 
 });

app/view/grid/summary/summary3.js

@@ -0,0 +1,79 @@
+/**
+ * 服务端计算合计栏
+ */
+Ext.define('uas.view.grid.summary.Summary3', {
+    extend: 'Ext.grid.Panel',
+    xtype: 'summary3',
+    controller: 'basic-grid',
+
+    requires: [
+        'uas.view.grid.basic.PanelController',
+        'uas.data.Company',
+        'uas.model.Company',
+        'uas.store.Companies'
+    ],
+
+    features: [{
+        ftype: 'summary',
+        fixed: true,
+        remoteRoot: 'summary'
+    }],
+
+    bbar: {
+        xtype: 'pagingtoolbar',
+        displayInfo: true
+    },
+
+    store: {
+        type: 'companies',
+        pageSize: 10,
+        remoteSort: true
+    },
+
+    columns: [{
+        text: 'Company',
+        width: 600,
+        dataIndex: 'name',
+        summaryType: 'count',
+        summaryRenderer: function(value, summaryData, dataIndex) {
+            return Ext.String.format('共有{0}条数据', value);
+        }
+    }, {
+        text: 'Price',
+        width: 150,
+        formatter: 'usMoney',
+        dataIndex: 'price',
+        summaryType: 'average',
+        summaryRenderer: function(value, summaryData, dataIndex) {
+            return Ext.String.format('平均价格：{0}', Ext.util.Format.usMoney(value));
+        }
+    }, {
+        text: 'Change',
+        width: 80,
+        renderer: 'renderChange',
+        dataIndex: 'priceChange'
+    }, {
+        text: '% Change',
+        width: 100,
+        renderer: 'renderPercent',
+        dataIndex: 'priceChangePct'
+    }, {
+        text: 'Last Updated',
+        width: 115,
+        formatter: 'date("m/d/Y")',
+        dataIndex: 'priceLastChange'
+    }, {
+        xtype: 'actioncolumn',
+        width: 50,
+        menuDisabled: true,
+        sortable: false,
+
+        items: [{
+            iconCls: 'x-fa fa-check green',
+            handler: 'onApprove'
+        }, {
+            iconCls: 'x-fa fa-ban red',
+            handler: 'onDecline'
+        }]
+    }]
+});

app/view/main/ContentPanel.js

@@ -11,5 +11,9 @@ Ext.define('uas.view.main.ContentPanel', {
     layout:'fit',
     scrollable: true,
 
+    requires: [
+        'Ext.layout.container.Fit'
+    ],
+
     layout: 'fit'
 });

app/view/main/Main.js

@@ -10,6 +10,10 @@ Ext.define('uas.view.main.Main', {
     constroller: 'main',
     viewModel: 'main',
     layout: 'border',
+
+    requires: [
+        'Ext.layout.container.Border'
+    ],
     
     items: [{
         region: 'west',

overrides/grid/feature/Summary.js

@@ -11,12 +11,12 @@ Ext.define('Ext.overrides.grid.feature.Summary', {
             dock = me.dock,
             fixed = me.fixed;
 
-        me.callParent([grid]);
-
         // when 'fixed' is true, 'dock' must be a defined value, default 'bottom'
         if(fixed) {
-            dock = me.dock  = dock || 'bottom';
+            dock = me.dock = dock || 'bottom';
         }
+        me.callParent([grid]);
+
         if (dock) {
             grid.addBodyCls(me.panelBodyCls + dock);
             grid.headerCt.on({

resources/json/navigation.json

@@ -74,6 +74,7 @@
             {
                 "text": "分页",
                 "leaf": true,
+                "target": "paging-grid",
                 "iconCls": "x-fa fa-smile-o"
             }
         ]