grid datasource

src/Defaults.ts

@@ -33,6 +33,9 @@ export const grid = {
         type: 'checkboxmodel',
         checkOnly: false
     },
+    autoLoad: true,
+    remoteSort: true,
+    remoteFilter: true,
 }
 
 export const search = {

src/controls/grid.js

@@ -1,6 +1,9 @@
 import _ from 'lodash'
 import {grid} from '../Defaults'
 import {baseConfig} from "./base";
+import {invokeMethod} from "../utils";
+import {lookupFn, lookupScope} from "../lib/lib";
+import {serverInvokeUrlTransform} from "../lib/config";
 
 export default function () {
 
@@ -9,11 +12,40 @@ export default function () {
         xtype: 'yvgrid',
 
         constructor(config) {
+            const me = this
+            const {dataSource} = config
             const newConfig = _.defaultsDeep({
                 // 强制性属性
 
             }, baseConfig(config, 'row-item'), config, grid)
 
+
+            if (_.isPlainObject(dataSource) && dataSource.method === 'invoke') {
+                newConfig.store = {
+                    autoLoad: newConfig.autoLoad,
+                    remoteSort: newConfig.remoteSort,
+                    remoteFilter: newConfig.remoteFilter,
+                    proxy: {
+                        type: 'jsonAjax',
+                        $owner: me,
+                        url: serverInvokeUrlTransform(dataSource.url),
+                        extraParams: dataSource.params,
+                        reader: {
+                            type: 'json',
+                            rootProperty: 'data',
+                            totalProperty: 'pagination.total',
+                            successProperty: 'success',
+                            messageProperty: 'msg'
+                        }
+                    },
+                    listeners: {
+                        load: function (store, records, successful, operation) {
+                            me.fireEvent('dataLoadComplete', me, successful, records);
+                        }
+                    }
+                }
+            }
+
             const buttons = [
                 {
                     xtype: 'button',
@@ -25,28 +57,14 @@ export default function () {
                     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);
-                            }
-                        }
+                        click: this.autoSizeColumns
                     }
                 },
                 {
                     xtype: 'button',
                     tooltip: '清空筛选',
                     iconCls: 'x-fa fa-filter',
-                    handler: (sender) => {
-                        sender.up('grid').filters.clearFilters();
-                    }
+                    handler: this.clearFilter
                 }
             ]
 
@@ -95,39 +113,60 @@ export default function () {
             this.superclass.constructor.call(this, newConfig)
         },
 
-        setLoading(value) {
-            if (value) {
-                this.mask('读取中')
+        setData(value) {
+            if (!this.store) {
+                const {config} = this
+                this.store = new Ext.data.Store({
+                    fields: getFileds(config),
+                    data: value
+                })
             } else {
-                this.unmask()
+                this.store.getProxy().setData(value)
+                this.store.load()
             }
         },
 
-        // reload() {
-        //     dataSourceReload(this)
-        // },
+        reload() {
+            const me = this
+            const {config} = me
+
+            if (config.dataSourceCallbackFn) {
+                const scope = lookupScope(this)
+                me.setLoading(true)
+                config.dataSourceCallbackFn.call(scope, me, {
+                    successCallback(value) {
+                        me.setData(value)
+                        me.setLoading(false)
+                        me.fireEvent('dataLoadComplete', me, true, value);
+                    },
+                    failCallback(error) {
+                        me.setLoading(false)
+                        me.fireEvent('dataLoadComplete', me, false, error);
+                    }
+                })
+            }
+        },
 
         initComponent() {
-            const that = this
+            const me = this
+            const {config} = me
+            const scope = lookupScope(this)
+
+            // 转换 dataSource 属性
+            convertDataSource(me, scope, config)
+
             this.on({
-                afterrender() {
+                afterrender(sender) {
                     const {config} = this
-
-                    // if (config.dataSource && config.autoLoad) {
-                    //     dataSourceReload(this)
-                    // }
+                    if (config.dataSourceCallbackFn && config.autoLoad) {
+                        me.reload()
+                    }
                 },
                 destory() {
                 },
-                // focus: {
-                //     // 获得焦点后自动下拉
-                //     fn(sender) {
-                //         sender.expand();
-                //         this.doQuery(this.allQuery, true);
-                //     },
-                // },
             })
 
+
             if (this.store?.proxy) {
                 // 为 stores.proxy.buildRequest 做准备
                 this.store.proxy.$owner = this
@@ -136,5 +175,88 @@ export default function () {
             this.superclass.initComponent.call(this)
         },
 
+        autoSizeColumns(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);
+            }
+        },
+
+        clearFilter(sender) {
+            sender.up('grid').filters.clearFilters();
+        },
+
+        setLoading(value) {
+            if (value) {
+                this.mask('读取中')
+            } else {
+                this.unmask()
+            }
+        },
+
+        // reload() {
+        //     dataSourceReload(this)
+        // },
     })
+}
+
+/**
+ * 获取 columns 中所有的 dataIndex
+ */
+function getFileds(newConfig) {
+    const fields = []
+    _.forEach(newConfig.columns, c => {
+        if (c.dataIndex) {
+            fields.push(c.dataIndex)
+        }
+    })
+    return fields
+}
+
+function convertDataSource(sender, scope, newConfig) {
+    if (typeof newConfig.store !== 'undefined') {
+        // 有 store 属性的情况下，不做任何事
+        return
+    }
+
+    if (typeof newConfig.dataSource === 'undefined') {
+        // 没有定义 dataSource 的情况下，不做任何事
+        return
+    }
+
+    if (_.isArray(newConfig.data)) {
+        // 有 data 属性赋值的情况下
+        newConfig.store = {
+            fields: getFileds(newConfig),
+            data: newConfig.data
+        }
+        delete newConfig.data
+        return
+    }
+
+    let {dataSource} = newConfig
+    if (typeof dataSource === 'string') {
+        // dataSource 是字符串的情况下，找到成员函数
+        dataSource = lookupFn(scope, dataSource)
+    }
+
+    if (typeof dataSource === 'function') {
+        // dataSource 是函数的情况下，在 afterrender 之后进行回调
+        newConfig.store = {
+            fields: getFileds(newConfig),
+            data: []
+        }
+        newConfig.dataSourceCallbackFn = dataSource
+        return
+    }
+
+
+    throw new TypeError('无法识别的调用方法')
 }