Extjs5 GridPanel RowEditing Notes 01

Ext.define(‘Ext.App.Areas.System.Para.ParaController‘, {

    extend: ‘Ext.app.ViewController‘,

    alias: ‘controller.ParaController‘,

    isEditing: false, // 编辑状态

    /* 刷新按钮点击 */
    onRefreshClick: function (button, e, eOpts) {
        var me = this;
        if (me.isEditing == false) {
            var grid = me.view.down(‘#paraGridPanel‘);
            Ext.apply(grid.store.proxy.extraParams, {});
            grid.store.load({ params: {} });
        }
    },

    /* 添加按钮点击 */
    onCreateClick: function (button, e, eOpts) {
        var me = this;
        if (me.isEditing == false) {
            var grid = me.view.down(‘#paraGridPanel‘);
            grid.store.insert(0, {});
            grid.editingPlugin.cancelEdit();
            grid.editingPlugin.startEdit(0, 0);
        }
    },

    /* 修改按钮点击 */
    onUpdateClick: function (button, e, eOpts) {
        var me = this;
        if (me.isEditing == false) {
            var grid = me.view.down(‘#paraGridPanel‘);
            var selections = grid.getSelection();
            grid.editingPlugin.cancelEdit();
            grid.editingPlugin.startEdit(selections[0], 0);
        }
    },

    /* 删除按钮点击 */
    onDeleteClick: function (button, e, eOpts) {
        var me = this;
        if (me.isEditing == false) {
            var grid = me.view.down(‘#paraGridPanel‘);
            var selections = grid.getSelection();
            if (selections.length > 0) {
                Ext.MessageBox.confirm(‘提示‘, ‘确定删除所选记录？‘, function (btn) {
                    if (btn == ‘yes‘) {
                        var ajaxUrl = grid.store.proxy.api.destroy;

                        var delArr = [];
                        for (var i = 0; i < selections.length; i++) {
                            delArr.push(selections[i].data[‘ID‘]);
                        }

                        Ext.Ajax.request({
                            url: ajaxUrl,
                            params: delArr.join(‘,‘),
                            success: function (response, opts) {
                                var json = Ext.decode(response.responseText);
                                if (json.status == true) {
                                    Ext.toast({
                                        html: ‘<span style="font-weight:bold;">‘ + json.info + ‘</span>‘,
                                        closable: false,
                                        align: ‘t‘,
                                        slideInDuration: 400,
                                        minWidth: 330
                                    });
                                    /* 移除删除项 */
                                    for (var i = 0; i < selections.length; i++) {
                                        grid.store.remove(selections[i]);
                                    }
                                } else {
                                    Ext.MessageBox.show({
                                        icon: Ext.MessageBox.ERROR,
                                        msg: json.info,
                                        buttons: Ext.MessageBox.OK
                                    });
                                }
                            },
                            failure: function (response, opts) {
                                Ext.MessageBox.show({
                                    msg: response.responseText,
                                    buttons: Ext.MessageBox.OK
                                });
                            }
                        });
                    }
                });
            }
        }
    },

    /* 添加或修改准备 */
    onBeforeEdit: function (editor, context, eOpts) {
        var me = this;

        if (me.isEditing != false)  // 进入了编辑状态则阻止
            context.cancel = true;
        me.isEditing = true;

        var updateButton = me.view.down(‘#update‘);
        if (updateButton.bind.disabled.lastValue == true && context.record.data[‘ID‘] != undefined) { // 判断编辑权限
            context.cancel = true;
            me.isEditing = false; // 修正编辑状态
        }

        /* 其他数据对应加载（如：省市联动） */
    },

    /* 添加或修改保存 */
    onEdit: function (editor, context, eOpts) {
        var me = this;
        var ajaxUrl = context.store.proxy.api.update;

        var originalValues = context.originalValues; // 原始数据
        var newValues = context.newValues; // 新数据

        if (newValues[‘ID‘] == undefined)
            ajaxUrl = context.store.proxy.api.create;

        /* Ext.Object.equals：字段值为null与字段值为‘‘也代表不相等，此处需要相反 */
        Ext.Object.each(originalValues, function (key, value, scope) {
            if (key != ‘‘ && value == null)
                originalValues[key] = ‘‘;
        });

        if (Ext.Object.equals(newValues, originalValues) == false) { /* 判断修改，避免不必要的提交 */
            Ext.Ajax.request({
                url: ajaxUrl,
                params: newValues,
                success: function (response, opts) {
                    var json = Ext.decode(response.responseText);
                    if (json.status == true) {
                        Ext.toast({
                            html: ‘<span style="font-weight:bold;">‘ + json.info + ‘</span>‘,
                            closable: false,
                            align: ‘t‘,
                            slideInDuration: 400,
                            minWidth: 330
                        });
                        /* 隐藏域赋值 */
                        if (context.record.data[‘ID‘] == undefined) {
                            context.record.set(‘ID‘, json.data[‘ID‘]);
                            context.record.set(‘CreateTime‘, json.data[‘CreateTime‘]);
                            /* 不是很理想的地方 */
                        }
                        context.store.commitChanges();
                    } else {
                        Ext.MessageBox.show({
                            icon: Ext.MessageBox.ERROR,
                            msg: json.info,
                            buttons: Ext.MessageBox.OK
                        });
                        context.store.rejectChanges();
                    }
                },
                failure: function (response, opts) {
                    Ext.MessageBox.show({
                        msg: response.responseText,
                        buttons: Ext.MessageBox.OK
                    });
                    context.store.rejectChanges();
                }
            });
        } else {
            context.store.commitChanges();
        }

        me.isEditing = false;
    },

    /* 添加或修改取消 */
    onCancelEdit: function (editor, context, eOpts) {
        var me = this;
        context.store.rejectChanges();
        me.isEditing = false;
    }
});