Question

我的应用程序有一个带有网格的小型后台，允许de admin编辑表单上的组合框列表。

可以使用rowediting插件编辑网格记录，并通过单击actioncolumn图标将其删除。

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

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

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

Answer 1

如果不应编辑该行，请使用beforeedit事件并返回false。对于actioncolumn - 只需检入处理程序编辑的记录并执行适当的操作。这是example

Answer 2

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

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

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

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

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是工作示例。

RowEditing插件：禁用编辑和动作列删除图标

2 个答案: