yvan-ext/src/controls/grid.js

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 () {

    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)


            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',
                    tooltip: '导出Excel',
                    iconCls: 'x-fa fa-file-excel-o'
                },
                {
                    xtype: 'button',
                    iconCls: 'x-fa fa-columns',
                    tooltip: '自适应宽度',
                    listeners: {
                        click: this.autoSizeColumns
                    }
                },
                {
                    xtype: 'button',
                    tooltip: '清空筛选',
                    iconCls: 'x-fa fa-filter',
                    handler: this.clearFilter
                }
            ]

            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
                    ]
                }
            }

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

        setData(value) {
            if (!this.store) {
                const {config} = this
                this.store = new Ext.data.Store({
                    fields: getFileds(config),
                    data: value
                })
            } else {
                this.store.getProxy().setData(value)
                this.store.load()
            }
        },

        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 me = this
            const {config} = me
            const scope = lookupScope(this)

            // 转换 dataSource 属性
            convertDataSource(me, scope, config)

            this.on({
                afterrender(sender) {
                    const {config} = this
                    if (config.dataSourceCallbackFn && config.autoLoad) {
                        me.reload()
                    }
                },
                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();
        },

        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('无法识别的调用方法')
}