RowEditing 插件：禁用编辑和操作列删除图标答案

【问题标题】：RowEditing plugin: disable editing and actioncolumn delete iconRowEditing 插件：禁用编辑和操作列删除图标
【发布时间】：2015-10-05 10:01:57
【问题描述】：

我的应用有一个带有网格的小型后台，允许管理员在表单上编辑组合框列表。

可以使用行编辑插件编辑网格记录，并通过单击操作列图标删除。

但是，组合框有一个无法编辑的项目，因为当显示在组合框上时会触发一个显示另一个表单字段的事件。

如何禁用编辑该项目的功能（使用图标更新和删除）？

小提琴：https://fiddle.sencha.com/#fiddle/us6

【问题讨论】：

所以当行显示'NOT EDIT'时你不想允许编辑和删除？

标签： javascript extjs combobox extjs5

【解决方案1】：

您可以使用beforeedit 侦听器通过返回 false 来防止编辑记录。

beforeedit: {
    fn: function(event,editor){                   

    switch (editor.record.data.name) {
            case 'NOT EDIT':
            return false;
            break;
            default:return true;     
        }
    }
},

您可以在actioncolumn 中使用isDisabled 来禁用记录的删除图标：

isDisabled: function (view, rowIndex, colIndex, item, record) {
    if (record.data.name =='NOT EDIT')
        return true;
    else
        return false;
},

完整代码：

var nameModel = Ext.create('Ext.data.Model', {fields: ['name']});               

var store = Ext.create('Ext.data.Store', {
    storeId: 'numberStore',
    model:nameModel,
    data: {
        'items': [{
            'name': 'one'
        }, {
            'name': 'two'
        }, {
            'name': 'three'
        }, {
            'name': 'NOT EDIT'
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});


var grid = Ext.create('Ext.grid.Panel', {
    width: 350,
    height: 220,
    border: true,
    title: 'Grid - item dblclick',
    itemId:'gridItemId',
    store: Ext.data.StoreManager.lookup('numberStore'),

    selType: 'rowmodel',
    plugins: {
        ptype: 'rowediting',
        clicksToEdit: 2,
        pluginId: 'roweditingId',

        saveBtnText : "Save",

        listeners: {
            edit: function(editor, context, eOpts){
                var grid = Ext.ComponentQuery.query('#gridItemId')[0];                         
                var store = grid.getStore();  
                var txtColIdx = 1;                       
                var textfieldRef = context.grid.columns[txtColIdx].getEditor(context.record); 
                var tetxfieldValue = textfieldRef.getValue();
                context.record.set('name', tetxfieldValue);

                store.sync({
                    success : function(record, operation) {
                        console.log('OK');
                    },
                    failure : function(record, operation) {
                        this.store.rejectChanges();
                    }
                });

           },
           beforeedit: {
                fn: function(event,editor){                   

                    switch (editor.value) {
                        case 'NOT EDIT':
                            return false;
                            break;
                        default:
                            return true;     
                    }
                }
            },

           canceledit : function ( editor, context, eOpts ){

              }
           }
       },

        columns: [{
            text: 'name',
            name:'name',
            dataIndex: 'name',
            sortable : false,
            hideable: false,
            flex: 1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        }, {
            xtype: 'actioncolumn',
            minWidth: 40,
            flex: 0.20,
            align: 'center',

            items: [{
                icon: 'delete.png',     
                tooltip: 'Delete record',
                isDisabled: function (view, rowIndex, colIndex, item, record) {
                    if (record.data.name =='NOT EDIT')
                        return true;
                    else
                        return false;
                },
                handler: function(grid, rowIndex, colIndex, item, e, rec) {
                          grid.getStore().removeAt(rowIndex);
                },                }]
        }],

    renderTo: Ext.getBody()
});

Here 是工作示例。

【讨论】：

感谢 ankit chaudhary。效果很好。只是另一个细节。在您的示例中，当我单击禁用的图标时，RowEditing 插件将在行中激活。知道如何在不使用警报或消息窗口的情况下解决此问题（这也是一种有效的解决方案）。
感谢您发现该错误，现在我已经更新并更正了删除功能也起作用的代码！
感谢 ankit。好主意。另一个小细节。随着您的升级，如果我单击“NOT EDIT”的另一行，它将被删除。也许是这样的： handler: function(grid, rowIndex, colIndex, item, e, rec) { if (rec.data.name =='NOT EDIT') { grid.getStore().removeAt(rowIndex); } }
对不起。我不清楚。当我单击第一行（第二和第三行）操作列图标时，它被删除的行。 store.removeAt (rowIndex) 应该这样做吗？
是的..这是处理函数中发生的事情。你可以删除可编辑的记录。这是你想要的吗？

【解决方案2】：

如果不应该编辑该行，则使用 beforeedit 事件并返回 false。对于 actioncolumn - 只需在处理程序中检查哪些记录被编辑并做适当的事情。这里是example

【讨论】：

谢谢约林。效果很好。