grid根据原生summary改造实现的固定位置的infoSummary合计栏

app/view/grid/summary/Panel.js

@@ -7,7 +7,7 @@ Ext.define('uas.view.grid.summary.Panel', {
         xtype: 'summary1',
     }, {
         title: '固定',
-        html: 'nothing...'
+        xtype: 'summary2'
     }]
 
 });

app/view/grid/summary/Summary1.js

@@ -3,23 +3,27 @@ Ext.define('uas.view.grid.summary.Summary1', {
     xtype: 'summary1',
 
     features: [{
-        ftype: 'summary'
+        ftype: 'summary',
+        dock: 'bottom'
     }],
 
     columns: [{
         text: 'Company',
-        flex: 1,
+        width: 600,
         dataIndex: 'name',
         summaryType: 'count',
         summaryRenderer: function(value, summaryData, dataIndex) {
-            return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
+            return Ext.String.format('共有{0}条数据', value);
         }
     }, {
         text: 'Price',
-        width: 95,
+        width: 150,
         formatter: 'usMoney',
         dataIndex: 'price',
-        summaryType: 'average'
+        summaryType: 'average',
+        summaryRenderer: function(value, summaryData, dataIndex) {
+            return Ext.String.format('平均价格：{0}', Ext.util.Format.usMoney(value));
+        }
     }, {
         text: 'Change',
         width: 80,

app/view/grid/summary/Summary2.js

@@ -0,0 +1,56 @@
+Ext.define('uas.view.grid.summary.Summary2', {
+    extend: 'uas.view.grid.basic.Panel',
+    xtype: 'summary2',
+
+    features: [{
+        ftype: 'infoSummary',
+        dock: 'bottom'
+    }],
+
+    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'
+        }]
+    }]
+});

ux/feature/InfoSummary.js

@@ -0,0 +1,207 @@
+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;
+ 
+        console.log(summaryRecord);
+        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();
+    }
+
+});