Ext-JS:如何禁用网格中单个单元格的单元格编辑？

Question

我现在正在使用Ext-JS 4.0.2构建一个Web应用程序,我正在使用一个可编辑的网格来控制在同一页面上显示的数据.

为了使网格可编辑,我遵循API文档并使用以下内容:

selType: 'cellmodel',
plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2
    })
]

但是,对于此网格,有几个单元不应该更改.

我可以简单地让事件处理程序在网格中更改后将数据更改回正确的状态,但这似乎是hacky,难以维护和不可读.有没有更好的方法来做到这一点？我读了API但找不到任何有用的属性.

UPDATE

至于这个特定的应用程序,只需禁用第一行即可.但我也有兴趣选择几个网格并使它们不可编辑(想象一个带网格的数独游戏).

Answer 1

正如我从评论中所理解的那样,您希望第一行不可编辑.有一个丑陋但快速的解决方案.分配给您的插件beforeedit处理程序.当事件被触发时,检查正在编辑的行.如果是第一个 - return false:

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2,
        listeners: {
            beforeedit: function(e, editor){
                if (e.rowIdx == 0)
                    return false;
            }
        }
    })
]

检查出的文档进行beforeedit.

UPDATE

文件说beforeedit有这样一组参数:

beforeedit( Ext.grid.plugin.Editing editor, Object e, Object options )

但是有错误.正确的序列是:

beforeedit( Object e, Ext.grid.plugin.Editing editor, Object options )

由于这个事实,我已经更新了示例.

Answer 2

您可以指定ColumnModel来声明可编辑列而不是可编辑列:

    var cm = new Ext.grid.ColumnModel({
        columns: [{
                     dataIndex: 'id',
                     header: 'id',
                     hidden: true
                  },{ 
                     dataIndex: '1',
                     header: '1',                   
                     editor: new Ext.form.TextField({})
                  },{ 
                     dataIndex: '2',
                     header: '2',                   
                     editor: new Ext.form.NumberField({})
                  },{ 
                     dataIndex: '3',
                     header: '3'
                  }]
            });

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        clicksToEdit: 2,
        cm: cm
        ...

在此示例中,列id不可见,第1列和第2列可编辑(使用文本和数字编辑器),第3列不可编辑.

更新:

防止行编辑:

    grid.on('beforeedit', function(event) {
        if (event.row == 0) {
             this.store.rejectChanges();
             event.cancel = true;
         }
    }, grid);