grid

src/Defaults.ts

@@ -13,7 +13,22 @@ export const combo = {
 }
 
 export const grid = {
-
+    border: false,
+    columnLines: true,
+    plugins: {
+        cellediting: {
+            clicksToEdit: 1
+        },
+        gridfilters: true
+    },
+    multiColumnSort: true,
+    viewConfig: {
+        enableTextSelection: true
+    },
+    selModel: {
+        type: 'checkboxmodel',
+        checkOnly: false
+    },
 }
 
 export const text = {

src/controls/grid.js

@@ -1,7 +1,6 @@
 import _ from 'lodash'
 import {grid} from '../Defaults'
 import {baseConfig} from "./base";
-import {dataSourceReload} from "../DataSourceHelper";
 
 export default function () {
     const cc = Ext.grid.Panel.prototype.constructor
@@ -13,6 +12,84 @@ export default function () {
 
             }, baseConfig(config, 'row-item'), config, grid)
 
+            const buttons = [
+                {
+                    xtype: 'button',
+                    tooltip: '导出Excel',
+                    iconCls: 'x-fa fa-file-excel-o'
+                },
+                {
+                    xtype: 'button',
+                    iconCls: 'x-fa fa-columns',
+                    tooltip: '自适应宽度',
+                    listeners: {
+                        click: (sender) => {
+                            const grid = sender.up('grid')
+                            // const columns = grid.columns;
+                            // for (let i = 0; i < columns.length; i++) {
+                            //     const column = columns[i];
+                            //     grid.getView().autoSizeColumn(column);
+                            //     column.setWidth(column.getWidth() + 5);
+                            // }
+                            for (let i = 1; i < grid.headerCt.getColumnCount(); i++) {
+                                grid.headerCt.getGridColumns()[i].autoSize(i);
+                                grid.headerCt.getGridColumns()[i].setWidth(grid.headerCt.getGridColumns()[i].getWidth() + 15);
+                            }
+                        }
+                    }
+                },
+                {
+                    xtype: 'button',
+                    tooltip: '清空筛选',
+                    iconCls: 'x-fa fa-filter',
+                    handler: (sender) => {
+                        sender.up('grid').filters.clearFilters();
+                    }
+                }
+            ]
+
+            if (newConfig.pagination) {
+                newConfig.bbar = new Ext.PagingToolbar({
+                    pageSize: 50,
+                    displayInfo: true,
+                    store: this.store,
+                    emptyMsg: '没有记录',
+                    items: [
+                        {
+                            xtype: 'combobox',
+                            tooltip: '分页',
+                            queryMode: 'local',
+                            editable: false,
+                            allowBlank: true,
+                            labelAlign: 'right',
+                            width: 90,
+                            // labelWidth: 30,
+                            listConfig: {
+                                minWidth: null
+                            },
+                            value: 20,
+                            valueField: undefined,
+                            displayField: undefined,
+                            store: ['20', '50', '100', '200', '300'],
+                            listeners: {
+                                change: (sender, nv, ov) => {
+                                    this.store.pageSize = nv;
+                                    this.store.loadPage(1);
+                                }
+                            }
+                        },
+                        ...buttons
+                    ]
+                })
+            } else {
+                newConfig.bbar = {
+                    xtype: 'toolbar', overflowHandler: 'menu',
+                    items: [
+                        '->',
+                        ...buttons
+                    ]
+                }
+            }
 
             cc.call(this, newConfig)
         },

src/init.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import initMainTab from './controls/MainTab'
+import initGrid from './controls/grid'
 import initTextfield from './controls/textfield'
 import initToolbar from './controls/toolbar/toolbar'
 import initSplitter from './controls/splitter'
@@ -35,6 +36,20 @@ export function init() {
         format: "Y-m-d",
     });
 
+    Ext.define("Ext.locale.zh_CN.view.AbstractView", {
+        override: "Ext.view.AbstractView",
+        loadingText: "读取中..."
+    });
+
+    Ext.define("Ext.locale.zh_CN.grid.header.Container", {
+        override: "Ext.grid.header.Container",
+        sortAscText: "正序",
+        sortDescText: "倒序",
+        lockText: "锁定列",
+        unlockText: "解除锁定",
+        columnsText: "列"
+    });
+
     /**
      * 改变事件的获取方式.
      * 具体见: ext-all-debug.js:23216 addListener
@@ -55,6 +70,7 @@ export function init() {
         _doAddListener.call(this, ename, fn, scope, options, order, caller, manager)
     }
 
+    initGrid()
     initMainTab()
     initTextfield()
     initCombo()