Extjs GridField 总结

　　此代码为完整代码，其中包含定位、使用 Enter 键，来实现 Tab 键。

Ext.define('xxx.recordBook.view.EditGrid', {
    extend: 'Ext.form.field.GridField',
    xtype: 'xxx',
    id: 'xxx',
    store: {
        type: 'xxx.instrumentdata.editInstrumentData'
    },

    requires: [
        'Ext.grid.selection.SpreadsheetModel',
        'Ext.grid.plugin.Clipboard'
    ],
    plugins: [
        cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    overrideInitComponent: function (config) {
        delete config.viewConfig;
        return config;
    },
    selModel: {
        type: 'spreadsheet',
        columnSelect: true,
        pruneRemoved: false,
        extensible: 'y'
    },

    disabled: true,
    getColumns: function (dataColumns) {
        var columns = [{
            /* 观测时间 */
            text: l('Monitors.InstrumentData.MeasureTime'),
            dataIndex: 'measureTime',
            xtype: 'datecolumn',
            format: l('Format.DateTime'),
            width: 200,
            editor: {
                maxValue: Ext.Date.format(new Date(), 'Y-m-d H:i:s'),
                xtype: "datetimefield",
                name: 'measureTime',
                defaultTime: '00:00:00'
            }
        }];
        if (dataColumns != "") {
            columns = columns.concat(dataColumns);
        }

        columns = columns.concat(
            [{
                /* 记录日志 */
                text: l('Monitors.InstrumentData.Note'),
                dataIndex: 'note',
                flex: 1,
                editor: {
                    allowBlank: true
                }

            }]
        );
        return columns;
    },

    initComponent: function () {
        var me = this;
        this.map = new Map();

        me.items = me.getColumns('');
        me.callParent(arguments);

    },
    buttons: [{
        text: l('PreviousSiteRecordBook'),
        handler: 'preSiteRecordBook',
        iconCls: 'fa fa-window-close'
    },
    {
        text: l('Save'),
        handler: 'saveRecordBook',
        iconCls: 'fa fa-save',
    },
    {
        text: l('NextSite'),
        handler: 'nextSiteRecordBook',
        iconCls: 'fa fa-save',
    }
    ],
    init: function (record, data) {
        var me = this;
        Esms.getInstrumentDataEditColumn(record.instrumentTypeId, function (columns, result) {
            me.dataTemplate = JSON.parse(result.instrumentType.dataTemplate);
            me.result = result;
            try {
                me.chartTemplate = JSON.parse(result.template.chartTemplate);
            } catch (error) {

            } finally {
                me.odata = data;
                var cols = me.getColumns(columns);
                me.setColumns(cols);
                var position = {
                    row: 0,
                    column: 1
                };
                var cellEditing = me.plugins[0];
                cellEditing.startEditByPosition(position);
            }

        }, function () { }, true);

        //初始化10行 rowEditing 数据露
        var measureTime = window.measureTime == undefined ? new Date(new Date().format('yyyy-MM-dd ')) : window.measureTime;

        if (me.getStore().data.items.length == 0) {
            me.getStore().insert(0, {
                measureTime: new Date(measureTime).format('yyyy-MM-dd hh:mm:ss'),
                flag: false
            });
        }

        //初始化10行
        // for (var i = 1; i < 10; i++) {
        //     me.getStore().insert(i, {
        //         measureTime: ''
        //     });
        // }
    },
    listeners: {
        beforeedit: function (editor, context, e) {
            var me = this;
            var row = context.rowIdx;
            var grid = Eui.frame.Ui.getActiveTab().down("monitors-recordbook-editGrid");
            try {
                context.cell.onkeydown = function (event) {
                    var e = event || window.event || arguments.callee.caller.arguments[0];
                    if (e && (e.keyCode == 13 || e.keyCode == 108)) { // enter键 要做的事情
                        e.stopPropagation();
                        if (context.field == "note") { //保存当前行数据
                            //下一个测点
                            me.getController().nextSiteRecordBook(me);

                        } else { ///触发Tab 移动到下一格
                            var position = {
                                row: row,
                                column: context.colIdx + 1
                            };
                            try {
                                var cellEditing = grid.plugins[0];
                                cellEditing.startEditByPosition(position);
                            } catch (error) {
                                console.log(error)
                            }

                        }
                    };
                }
            } catch (error) {
                console.log(error);
            }

            try {
                setTimeout(function () { Ext.query('input[name=measureTime]')&&Ext.query('input[name=measureTime]')[0]&&Ext.query('input[name=measureTime]')[0].select(); }, 100);
            } catch (error) {}
        },
        edit: function (editor, context, e) {

            var number = context.rowIdx;
            var me = this;
            //获取当前行数据
            var editing = editor.context.record.data;
            var flag = false;

            //修改测量时间和备注不用计算
            if (context.field == 'note' || context.field == "measureTime") {
                flag = false;
            } else {
                //比对必填项是否以填
                for (var i = 0; i < this.dataTemplate.length; i++) {
                    var data = this.dataTemplate[i];
                    if (data.expression == "") {
                        if (editing[data.map] == null) {
                            return;
                        }
                        flag = true;
                        editing['flag'] = true;
                    }
                }
            }

            //数据计算数据：那该条数据去后台计算结果
            if (flag) {
                var data = context.record.data;
                me.calculation(data, number);
            }
        },

    },
    copyData: function (str) {
        this.getStore().removeAt(0);
        var me = this;
        var rows = str.split('\r\n');
        var lists = [];
        for (var i = 0; i < rows.length; i++) {
            var element = rows[i];
            if (element == "") break;
            var columns = element.split("\t");
            var data = {};
            //判断复制内容中是否包含日期
            var k = 0;
            if (isNaN(Number(columns[k]))) {
                data.measureTime = columns[k];
                k = 1;
            } else {
                data.measureTime = new Date(window.measureTime).format('yyyy-MM-dd hh:mm:ss');
            }
            for (j = 0; j < this.dataTemplate.length; j++) {
                if (this.dataTemplate[j].expression == '') {
                    var it = isNaN(Number(columns[k])) ? 0 : Number(columns[k]);
                    data[this.dataTemplate[j].map] = it;
                    k++;
                }
            }
            if (k < columns.length) {
                data.note = columns[k];
            }
            delete data.id;
            this.getStore().insert(i, data);
            me.calculation(data, i);
        }
    },
    calculation: function (data, number) {
        var me = this;
        data.instrumentId = this.record.instrumentId;
        data.projectId = AppConfig.data.projectId;
        window.measureTime = data.measureTime;
        Ext.Ajax.request({
            url: Api.app.instrumentData.findInstrumentData.url,
            method: Api.app.instrumentData.findInstrumentData.method,
            jsonData: {
                instrumentData: data
            },
            success: function (response) {
                var avatarData = Ext.util.JSON.decode(response.responseText);
                var result = avatarData.result;
                me.saveData(result, number);
            }
        });
    },
    saveData: function (result, number) {
        var me = this;
        me.map.set(number, result);

        var tab = Eui.frame.Ui.getActiveTab();
        var instrumentGrid = tab.down("monitors-instrumentdata-grid");
        var record = instrumentGrid.getStore().getData().items;
        var newData = [];
        for (var i = 0; i < me.map.size; i++) {
            var data = me.map.get(i);
            data.instrumentName = me.record.name;
            newData.push({
                data: data
            });
        }

        me.setGraph(record.concat(newData));
    },
    setGraph: function (records) {
        var me = this;
        var obj = [];
        for (var i = 0; i < records.length; i++) {
            var r = records[i];
            obj.push(r.data)
        }

        //排序
        obj.sort(function (a, b) {
            var nowdate = new Date();
            var temp1 = new Date(a.measureTime);
            var temp2 = new Date(b.measureTime);
            var dc1 = Math.abs((parseInt(nowdate - temp1) / 1000));
            var dc2 = Math.abs((parseInt(nowdate - temp2) / 1000));
            if (dc1 < dc2) {
                return -1;
            } else if (dc1 > dc2) {
                return 1;
            } else {
                return 0;
            }
        });

        var tab = Eui.frame.Ui.getActiveTab();

        var iframe = tab.getEl().dom.querySelector('iframe');
        if (iframe) {
            if (iframe.contentWindow && iframe.contentWindow.inited) {
                var frame = iframe.contentWindow;
                me.gb = frame.editor.initChart(me.result, obj, me.dataTemplate);
            }
        }
    }

})