yvan-ext/src/controls/grid.js

import _ from 'lodash'
import {grid} from '../Defaults'
import {baseConfig} from "./base";
import {lookupFn, lookupScope} from "../lib/lib";
import {serverInvokeUrlTransform} from "../lib/config";
import {calcObject} from "../lib/systemLib";
import {
    disabled,
    fieldLabel,
    gravity, height, metaId,
    PropertyDescriptionTable,
    tooltip,
    value, width,
    YvBase
} from "../PropertyDescriptionTable";
import {PropertyDescription} from "../PropertyDescription";

export default function () {

    Ext.define('Yvan.Grid', {
        extend: 'Ext.grid.Panel',
        xtype: 'yvgrid',

        constructor(config) {
            const me = this
            const {dataSource} = config
            const newConfig = _.defaultsDeep({
                // 强制性属性

            }, baseConfig(config, 'row-item'), config, grid)

            const buttons = [
                {
                    xtype: 'button',
                    tooltip: '导出Excel',
                    iconCls: 'x-fa fa-download'
                },
                {
                    xtype: 'button',
                    iconCls: 'x-fa fa-text-width',
                    tooltip: '自适应宽度',
                    listeners: {
                        click: this.autoSizeColumns
                    }
                },
                {
                    xtype: 'button',
                    tooltip: '清空筛选',
                    iconCls: 'x-fa fa-filter',
                    handler: this.clearFilter
                },
                {
                    xtype: 'button',
                    tooltip: '清空筛选',
                    iconCls: 'x-fa fa-cube',
                    handler: this.test
                }
            ]

            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: 50,
                            valueField: undefined,
                            displayField: undefined,
                            hideClear: true,
                            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
                    ]
                }
            }

            this.superclass.constructor.call(this, newConfig)
        },

        _setDataReal(value) {
            const me = this
            me.setStore(new Ext.data.Store({
                fields: getFileds(this),
                data: value
            }))
        },

        /**
         * 轻量级刷新
         */
        refreshData() {
            const store = this.getStore()
            if (store) {
                store.reload()
            }
        },

        /**
         * 为表格强制设置焦点
         * @param seq 顺序号
         */
        focusRow(seq) {
            this.setSelection(this.store.getAt(seq))
            this.getView().focusRow(seq)
        },

        /**
         * 重新载入数据（重新计算参数）
         */
        reload(reloadParams = {}) {
            const me = this
            const {config} = me

            if (config.dataSourceCallbackFn) {
                // 函数请求刷新
                const scope = lookupScope(this)
                // me.setLoading(true)
                config.dataSourceCallbackFn.call(scope, me, {
                    successCallback(value) {
                        me._setDataReal(value)
                        // me.setLoading(false)
                        me.fireEvent('dataLoadComplete', me, true, value);
                    },
                    failCallback(error) {
                        // me.setLoading(false)
                        me.fireEvent('dataLoadComplete', me, false, error);
                    }
                })
                return
            }

            // if (this.store) {
            //     this.store.reload({aaaa: 1, bbbb: 2})
            // }
            const {dataSource} = config
            if (_.isPlainObject(dataSource) && dataSource.method === 'invoke' && !window["IS_DESIGN_MODE"]) {
                const scope = lookupScope(me)

                calcObject(scope.viewModel, dataSource.params).then(params => {

                    me.setStore(new Ext.data.Store({
                        remoteSort: config.remoteSort,
                        remoteFilter: config.remoteFilter,
                        proxy: {
                            type: 'jsonAjax',
                            $owner: me,
                            url: serverInvokeUrlTransform(dataSource.url),
                            extraParams: _.defaultsDeep({}, reloadParams, 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);
                            }
                        }
                    }))
                })
            }
        },

        initComponent() {
            const me = this
            const {config} = me
            const scope = lookupScope(this)

            if (!window["IS_DESIGN_MODE"]) {
                // 转换 dataSource 属性
                convertDataSource(me, scope, config)
            }

            this.on({
                afterrender(sender) {
                    const me = this
                    const {config} = this
                    const {dataSource} = config

                    if (config.autoLoad) {
                        if (config.dataSourceCallbackFn) {
                            me.reload()
                                ``
                        } else if (_.isPlainObject(dataSource) && dataSource.method === 'invoke') {
                            me.reload()
                        }
                    }

                    if (config.contextMenu) {
                        this.contextMenu = this.add(config.contextMenu)
                    }

                    const $dom = $(sender.el.dom)
                    $dom.on('keydown', (e) => {
                        me.fireEvent('keydown', me, e,)

                    }).on('keyup', (e) => {
                        me.fireEvent('keyup', me, e,)
                    })
                },
                itemcontextmenu(view, rec, node, index, e) {
                    if (this.contextMenu) {
                        e.stopEvent();
                        this.contextMenu.show().setLocalXY(e.getXY());
                        return false;
                    }
                },
                destory() {
                },
            })


            if (this.store?.proxy) {
                // 为 stores.proxy.buildRequest 做准备
                this.store.proxy.$owner = this
            }

            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();
        },

        test(sender) {
            const grid = sender.up('grid')
            // grid.refreshData()
            // console.log('grid', grid)
        },

        setLoading(value) {
            if (value) {
                this.mask('读取中')
            } else {
                this.unmask()
            }
        },

        // reload() {
        //     dataSourceReload(this)
        // },
    })


    PropertyDescriptionTable.set(
        'yvgrid',
        new PropertyDescription(YvBase, {
            props: [
                fieldLabel, value, disabled,
                gravity, tooltip, metaId, width, height
            ],
        })
    )
}

/**
 * 获取 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 = new Ext.data.Store({
            fields: getFileds(newConfig),
            // data: [],
            autoLoad: true,
            proxy: {
                type: 'memory',
                data: [],
                // reader: {
                //     type: 'json',
                //     rootProperty: 'users'
                // }
            }
        })
        newConfig.dataSourceCallbackFn = dataSource
        return
    }


    // throw new TypeError('无法识别的调用方法')
}