加载设置修改

app/Application.js

@@ -9,7 +9,8 @@ Ext.define('uas.Application', {
 
     requires: [
         'uas.view.main.*',
-        'uas.controller.Global'
+        'uas.controller.Global',
+        'uas.model.Base'
     ],
 
     name: 'uas',

app/controller/Global.js

@@ -2,7 +2,7 @@
  * @Description: 
  * @Author: hy
  * @Date: 2019-08-12 17:59:33
- * @LastEditTime: 2019-08-15 09:30:58
+ * @LastEditTime: 2019-08-15 10:46:59
  */
 Ext.define('uas.controller.Global', {
     extend: 'Ext.app.Controller',
@@ -44,7 +44,7 @@ Ext.define('uas.controller.Global', {
                 Ext.require(className,function(){
                     resolve();
                 });
-            }).then(function(){ 
+            }).then(function(){
                 if(!!Ext.ClassManager.get(className)) {
                     action.resume();
                 }else{
@@ -59,16 +59,26 @@ Ext.define('uas.controller.Global', {
                     //stop action
                     action.stop();
                 }
+            }).catch(function(e){
+                Ext.Msg.alert(
+                    '加载异常',
+                    '确定以返回首页',
+                    function() {
+                        // TODO 路由跳转并不会引起页面刷新，待解决
+                        me.redirectTo(me.getApplication().getDefaultToken());
+                    }
+                );
+                action.stop();
             })
         }
     },
 
     handleRoute: function(target) {
         let me = this,
+            contentPanel = me.getContentPanel(),
             store = Ext.StoreMgr.get('Navigation'),
             node = store.findNode('target', target),
-            title = node.get('text'),
-            contentPanel = me.getContentPanel();
+            title = node.get('text');
         
         this.getViewport().getViewModel().set('selectedNode', node);        
         Ext.suspendLayouts();

app/view/grid/basic/Panel.js

@@ -3,6 +3,13 @@ Ext.define('uas.view.grid.basic.Panel', {
     xtype: 'basic-grid',
     controller: 'basicgrid',
 
+    requires: [
+        'uas.view.grid.basic.PanelController',
+        'uas.data.Company',
+        'uas.model.Company',
+        'uas.store.Companies'
+    ],
+
     stateful: true,
     multiSelect: true,
     stateId: 'stateGrid',

app/view/grid/expander/Panel.js

@@ -0,0 +1,70 @@
+/**
+ * This is an example of using the grid with a RowExpander plugin that adds the ability
+ * to have a column in a grid which enables a second row body which expands/contracts.
+ *
+ * The expand/contract behavior is configurable to react on clicking of the column, double
+ * click of the row, and/or hitting enter while a row is selected.
+ */
+Ext.define('uas.view.grid.expander.Panel', {
+    extend: 'Ext.grid.Panel',
+
+    xtype: 'grid-expander-panel',
+
+    requires: [
+        'uas.data.Company',
+        'uas.model.Company',
+        'uas.store.Companies'
+    ],
+
+    bind: '{companies}',
+    viewModel: {
+        stores: {
+            companies: {
+                type: 'companies',
+                autoLoad: true,
+            }
+        }
+    },
+    profiles: {
+        classic: {
+            width: 600,
+            pricechangeWidth: 100,
+            percentChangeColumnWidth: 100,
+            lastUpdatedColumnWidth: 100
+        },
+        neptune: {
+            width: 600,
+            pricechangeWidth: 100,
+            percentChangeColumnWidth: 100,
+            lastUpdatedColumnWidth: 100
+        },
+        graphite: {
+            width: 750,
+            pricechangeWidth: 110,
+            percentChangeColumnWidth: 120,
+            lastUpdatedColumnWidth: 150          
+        }
+    },
+    columns: [
+        { text: "Company", flex: 1, dataIndex: 'name'},
+        { text: "Price", formatter: 'usMoney', dataIndex: 'price', width: 100},
+        { text: "Change", dataIndex: 'priceChange', width: 100},
+        { text: "% Change", dataIndex: 'priceChangePct', width: 100},
+        { text: "Last Updated", formatter: 'date("m/d/Y")', dataIndex: 'priceLastChange', width: 100}
+    ],
+
+    plugins: {
+        rowexpander: {
+            rowBodyTpl: new Ext.XTemplate(
+                '<p><b>Company:</b> {name}</p>',
+                '<p><b>Change:</b> {change:this.formatChange}</p>',
+                {
+                    formatChange: function (v) {
+                        var color = v >= 0 ? 'green' : 'red';
+                        return '<span style="color: ' + color + ';">' +
+                            Ext.util.Format.usMoney(v) + '</span>';
+                    }
+                })
+        }
+    }
+});

app/view/grid/grouped/Panel.js

@@ -6,6 +6,11 @@ Ext.define('uas.view.grid.grouped.Panel', {
     xtype: 'grouped-grid',
     controller: 'grouped-grid',
 
+    requires: [
+        'uas.model.Restaurant',
+        'uas.store.Restaurants'
+    ],
+
     bind: '{restaurants}',
 
     columns: [{
@@ -32,8 +37,8 @@ Ext.define('uas.view.grid.grouped.Panel', {
         startCollapsed: true,
         groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
     }, {
-        ftype: 'infoSummary',
-        dock: 'bottom'
+        ftype: 'summary',
+        fixed: true
     }],
 
     viewModel: {

app/view/grid/summary/Panel.js

@@ -8,6 +8,9 @@ Ext.define('uas.view.grid.summary.Panel', {
     }, {
         title: '位置固定',
         xtype: 'summary2'
+    }, {
+        title: '后台计算',
+        html: '需配合分页使用，待完善'
     }]
 
 });

app/view/grid/summary/Summary1.js

@@ -1,7 +1,18 @@
+/**
+ * 位置联动合计栏
+ * 使用原生的summary
+ */
 Ext.define('uas.view.grid.summary.Summary1', {
     extend: 'uas.view.grid.basic.Panel',
     xtype: 'summary1',
 
+    requires: [
+        'Ext.grid.feature.Summary',
+        'uas.data.Company',
+        'uas.model.Company',
+        'uas.store.Companies'
+    ],
+
     features: [{
         ftype: 'summary',
         dock: 'bottom'

app/view/grid/summary/Summary2.js

@@ -1,10 +1,21 @@
+/**
+ * 位置固定合计栏
+ * 原生合计栏添加参数fixed: true
+ */
 Ext.define('uas.view.grid.summary.Summary2', {
     extend: 'uas.view.grid.basic.Panel',
     xtype: 'summary2',
 
+    requires: [
+        'Ext.grid.feature.Summary',
+        'uas.data.Company',
+        'uas.model.Company',
+        'uas.store.Companies'
+    ],
+
     features: [{
-        ftype: 'infoSummary',
-        dock: 'bottom'
+        ftype: 'summary',
+        fixed: true
     }],
 
     columns: [{

overrides/grid/feature/Summary.js

@@ -0,0 +1,203 @@
+Ext.define('Ext.overrides.grid.feature.Summary', {
+    override: 'Ext.grid.feature.Summary',
+
+    // override
+    fixed: undefined,
+    fixedSummaryCls: Ext.baseCSSPrefix + 'fixed-summary',
+
+    init: function (grid) {
+        var me = this,
+            view = me.view,
+            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';
+        }
+        if (dock) {
+            grid.addBodyCls(me.panelBodyCls + dock);
+            grid.headerCt.on({
+                add: me.onStoreUpdate,
+                // we need to fire onStoreUpdate afterlayout for docked items 
+                // to re-run the renderSummaryRow on show/hide columns. 
+                afterlayout: me.onStoreUpdate,
+                remove: me.onStoreUpdate,
+                scope: me
+            });
+            grid.on({
+                beforerender: function () {
+                    var tableCls = [me.summaryTableCls];
+                    if (view.columnLines) {
+                        tableCls[tableCls.length] = view.ownerCt.colLinesCls;
+                    }
+                    me.summaryBar = grid.addDocked({
+                        childEls: ['innerCt', 'item'],
+                        renderTpl: [
+                            '<div id="{id}-innerCt" data-ref="innerCt" role="presentation">',
+                            '<table id="{id}-item" data-ref="item" cellPadding="0" cellSpacing="0" class="' + tableCls.join(' ') + '">',
+                            '<tr class="' + me.summaryRowCls + '"></tr>',
+                            '</table>',
+                            '</div>'
+                        ],
+                        scrollable: {
+                            x: false,
+                            y: false
+                        },
+                        hidden: !me.showSummaryRow,
+                        itemId: 'summaryBar',
+                        cls: [me.dockedSummaryCls, me.dockedSummaryCls + '-' + dock, (fixed ? me.fixedSummaryCls : '')],
+                        xtype: 'component',
+                        dock: dock,
+                        weight: 10000000
+                    })[0];
+                },
+                afterrender: function () {
+                    grid.getView().getScrollable().addPartner(me.summaryBar.getScrollable(), 'x');
+                    me.onStoreUpdate();
+                    me.columnSizer = me.summaryBar.el;
+                },
+                single: true
+            });
+        } else {
+            if (grid.bufferedRenderer) {
+                me.wrapsItem = true;
+                view.addRowTpl(me.fullSummaryTpl).summaryFeature = me;
+                view.on('refresh', me.onViewRefresh, me);
+            } else {
+                me.wrapsItem = false;
+                me.view.addFooterFn(me.renderSummaryRow);
+            }
+        }
+
+        grid.headerCt.on({
+            afterlayout: me.afterHeaderCtLayout,
+            scope: me
+        });
+
+        grid.ownerGrid.on({
+            beforereconfigure: me.onBeforeReconfigure,
+            columnmove: me.onStoreUpdate,
+            scope: me
+        });
+        me.bindStore(grid, grid.getStore());
+    },
+
+    onStoreUpdate: function () {
+        var me = this,
+            view = me.view,
+            selector = me.summaryRowSelector,
+            dock = me.dock,
+            fixed = me.fixed,
+            record, newRowDom, oldRowDom, newCellDoms, p;
+
+        if (!view.rendered) {
+            return;
+        }
+
+        record = me.createSummaryRecord(view);
+        newRowDom = Ext.fly(view.createRowElement(record, -1)).down(selector, true);
+
+        if (!newRowDom) {
+            return;
+        }
+
+        if(fixed) {
+            newCellDoms = newRowDom.children;
+            for(let i = newCellDoms.length - 1; i >= 0 ; i--) {
+                let innerText = newCellDoms[i].innerText.trim();
+                if(innerText.length === 0) {
+                    newRowDom.removeChild(newCellDoms[i])
+                }else {
+                    newCellDoms[i].style.removeProperty('width');
+                }
+            }
+        }
+
+        // Summary row is inside the docked summaryBar Component 
+        if (dock) {
+            p = me.summaryBar.item.dom.firstChild;
+            oldRowDom = p.firstChild;
+
+            p.insertBefore(newRowDom, oldRowDom);
+            p.removeChild(oldRowDom);
+        }
+        // Summary row is a regular row in a THEAD inside the View. 
+        // Downlinked through the summary record's ID 
+        else {
+            oldRowDom = view.el.down(selector, true);
+            p = oldRowDom && oldRowDom.parentNode;
+
+            if (p) {
+                p.removeChild(oldRowDom);
+            }
+
+            // We're always inserting the new summary row into the last rendered row, 
+            // unless no rows exist. In that case we will be appending to the special 
+            // placeholder in the node container. 
+            p = view.getRow(view.all.last());
+
+            if (p) {
+                p = p.parentElement;
+            }
+            // View might not have nodeContainer yet. 
+            else {
+                p = me.getSummaryRowPlaceholder(view);
+                p = p && p.tBodies && p.tBodies[0];
+            }
+
+            if (p) {
+                p.appendChild(newRowDom);
+            }
+        }
+    },
+
+    // Synchronize column widths in the docked summary Component or the inline summary row 
+    // depending on whether we are docked or not. 
+    afterHeaderCtLayout: function (headerCt) {
+        var me = this,
+            view = me.view,
+            columns = view.getVisibleColumnManager().getColumns(),
+            column,
+            len = columns.length,
+            i,
+            summaryEl,
+            el, width, innerCt;
+
+        if (me.showSummaryRow && view.refreshCounter) {
+            if(me.fixed) {
+                return;
+            }
+            if (me.dock) {
+                summaryEl = me.summaryBar.el;
+                width = headerCt.getTableWidth();
+                innerCt = me.summaryBar.innerCt;
+
+                // Stretch the innerCt of the summary bar upon headerCt layout 
+                me.summaryBar.item.setWidth(width);
+
+                // headerCt's tooNarrow flag is set by its layout if the columns overflow. 
+                // Must not measure+set in after layout phase, this is a write phase. 
+                if (headerCt.tooNarrow) {
+                    width += Ext.getScrollbarSize().width;
+                }
+                innerCt.setWidth(width);
+            } else {
+                summaryEl = Ext.fly(Ext.fly(view.getNodeContainer()).down('.' + me.summaryItemCls, true));
+            }
+
+            // If the layout was in response to a clearView, there'll be no summary element 
+            if (summaryEl) {
+                for (i = 0; i < len; i++) {
+                    column = columns[i];
+                    el = summaryEl.down(view.getCellSelector(column), true);
+                    if (el) {
+                        Ext.fly(el).setWidth(column.width || (column.lastBox ? column.lastBox.width : 100));
+                    }
+                }
+            }
+        }
+    },
+});

resources/json/navigation.json

@@ -29,14 +29,15 @@
                 "iconCls": "x-fa fa-smile-o"
             },
             {
-                "text": "分组列",
+                "text": "行分组",
                 "target": "grouped-grid",
                 "leaf": true,
                 "iconCls": "x-fa fa-smile-o"
             },
             {
-                "text": "展开列",
+                "text": "行展开",
                 "leaf": true,
+                "target": "grid-expander-panel",
                 "iconCls": "x-fa fa-smile-o"
             },
             {

ux/feature/InfoSummary.js

@@ -1,206 +0,0 @@
-Ext.define('Ext.ux.feature.InfoSummary', {
-
-    /* Begin Definitions */
-
-    extend: 'Ext.grid.feature.AbstractSummary',
-
-    alias: 'feature.infoSummary',
-
-    /**
-    * @cfg {String} dock 
-    * Configure `'top'` or `'bottom'` top create a fixed summary row.
-    *
-    */
-    dock: 'bottom',
-
-    dockedSummaryCls: Ext.baseCSSPrefix + 'docked-info-summary',
-    
-    summaryRowCls: Ext.baseCSSPrefix + 'grid-row-info-summary ' + Ext.baseCSSPrefix + 'grid-row-total',
-    summaryRowSelector: '.' + Ext.baseCSSPrefix + 'grid-row-info-summary.' + Ext.baseCSSPrefix + 'grid-row-total',
-    summaryCellSelector: '.' + Ext.baseCSSPrefix + 'grid-cell.' + Ext.baseCSSPrefix + 'grid-td',
-    panelBodyCls: Ext.baseCSSPrefix + 'info-summary-',
-
-    infoSummaryRowTpl: [
-        '<tpl for=".">',
-        '<td class="' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-td">',
-            '<div class="' + Ext.baseCSSPrefix + 'grid-cell-inner">',
-                '{label}',
-            '</div>',
-        '</td>',
-        '</tpl>',
-    ],
-
-    init: function(grid) {
-        var me = this,
-            view = me.view,
-            dock = me.dock,
-            store = grid.getStore();
-
-        me.grid = grid;
-        
-        me.callParent([
-            grid
-        ]);
-        grid.addBodyCls(me.panelBodyCls + dock);
-        grid.headerCt.on({
-            add: me.onStoreUpdate,
-            afterlayout: me.onStoreUpdate,
-            remove: me.onStoreUpdate,
-            scope: me
-        });
-        grid.on({
-            beforerender: function() {
-                var tableCls = [me.summaryTableCls];
-                    if (view.columnLines) {
-                        tableCls[tableCls.length] = view.ownerCt.colLinesCls;
-                    }
-                me.summaryBar = grid.addDocked({
-                    childEls: ['innerCt', 'item'],
-                    renderTpl: [
-                        '<div id="{id}-innerCt" data-ref="innerCt" role="presentation">',
-                            '{%this.renderContent(out, values)%}',
-                        '</div>',
-                    ],
-                    tpl: [
-                        '<table id="{id}-item" data-ref="item" cellPadding="0" cellSpacing="0" class="' + tableCls.join(' ') + '">',
-                            '<tr class="' + me.summaryRowCls + '">',
-                                '{%',
-                                    'this.renderSummaryRow(values, out)',
-                                '%}',
-                            '</tr>',
-                        '</table>',
-                        {
-                            renderSummaryRow: function(values, out) {
-                                let datas = values.map(function(v) {
-                                    return { label: v }
-                                });
-                                out.push((me.infoSummaryRowTpl.isXTemplate ? me.infoSummaryRowTpl : new Ext.XTemplate(me.infoSummaryRowTpl)).applyOut(datas, out));
-                            },
-                        }
-                    ],
-                    height: 32,
-                    scrollable: {
-                        x: false,
-                        y: false
-                    },
-                    itemId: 'info-summary-bar',
-                    cls: [ me.dockedSummaryCls, me.dockedSummaryCls + '-' + dock ],
-                    xtype: 'component',
-                    dock: dock,
-                    weight: 10000000,
-                })[0];
-            },
-            afterrender: function() {
-                grid.getView().getScrollable().addPartner(me.summaryBar.getScrollable(), 'x');
-                me.onStoreUpdate();
-                me.columnSizer = me.summaryBar.el;
-            },
-            single: true
-        });
-
-        me.bindStore(grid, store);
-    },
-
-    bindStore: function(grid, store) {
-        var me = this;
- 
-        Ext.destroy(me.storeListeners);
-        me.storeListeners = store.on({
-            scope: me,
-            destroyable: true,
-            update: me.onStoreUpdate,
-            datachanged: me.onStoreUpdate
-        });
-        
-        me.callParent([grid, store]);
-    },
-
-    createSummaryRecord: function (view) {
-        var me = this,
-            columns = view.headerCt.getGridColumns(),
-            remoteRoot = me.remoteRoot,
-            summaryRecord = me.summaryRecord || (me.summaryRecord = new Ext.data.Model({
-                id: view.id + '-info-summary-record'
-            })),
-            colCount = columns.length, i, column,
-            dataIndex, summaryValue;
- 
-        // Set the summary field values 
-        summaryRecord.beginEdit();
- 
-        if (remoteRoot) {
-            summaryValue = me.generateSummaryData();
-            
-            if (summaryValue) {
-                summaryRecord.set(summaryValue);
-            }
-        }
-        else {
-            for (i = 0; i < colCount; i++) {
-                column = columns[i];
- 
-                // In summary records, if there's no dataIndex, then the value in regular rows must come from a renderer. 
-                // We set the data value in using the column ID. 
-                dataIndex = column.dataIndex || column.getItemId();
- 
-                // We need to capture this value because it could get overwritten when setting on the model if there 
-                // is a convert() method on the model. 
-                summaryValue = me.getSummary(view.store, column.summaryType, dataIndex);
-                summaryRecord.set(dataIndex, summaryValue);
- 
-                // Capture the columnId:value for the summaryRenderer in the summaryData object. 
-                me.setSummaryData(summaryRecord, column.getItemId(), summaryValue);
-            }
-        }
- 
-        summaryRecord.endEdit(true);
-        // It's not dirty 
-        summaryRecord.commit(true);
-        summaryRecord.isSummary = true;
- 
-        return summaryRecord;
-    },
-
-    onStoreUpdate: function() {
-        var me = this,
-            view = me.view,
-            selector = me.summaryCellSelector,
-            dock = me.dock,
-            record, newCellDoms, summaryLabels = [];
- 
-        if (!view.rendered) {
-            return;
-        }
-        record = me.createSummaryRecord(view);
-
-        newCellDoms = Ext.fly(view.createRowElement(record, -1)).query(selector, true);
-
-        if(!newCellDoms || newCellDoms.length === 0) {
-            return;
-        }
- 
-        if (!dock) {
-            return;
-        }
-        
-        for(let i = 0; i < newCellDoms.length; i++) {
-            let innerText = newCellDoms[i].innerText.trim();
-            if(innerText.length > 0) {
-                summaryLabels.push(innerText);
-            }
-        }
-
-        me.summaryBar.update(summaryLabels);
-    },
-
-    getSummaryBar: function() {
-        return this.summaryBar;
-    },
-
-    destroy: function() {
-        var me = this;
-        me.summaryRecord = me.storeListeners = Ext.destroy(me.storeListeners);
-        me.callParent();
-    }
-
-});