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

Javascript Ext JS:如何禁用网格中单个单元格的单元格编辑?,javascript,extjs,grid,Javascript,Extjs,Grid,我现在正在用ExtJS4.0.2构建一个web应用程序,并且我正在使用一个可编辑的网格来控制要在同一页面上为表显示的数据 为了使网格可编辑,我遵循API文档并使用以下内容: selType: 'cellmodel', plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 2 }) ] 但是,对于该网格,有几个单元格不应更改 我可以简单地让事件处理程序在网格中更改数据后将其更改回正

我现在正在用ExtJS4.0.2构建一个web应用程序,并且我正在使用一个可编辑的网格来控制要在同一页面上为表显示的数据

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

selType: 'cellmodel',
plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 2
    })
]
但是,对于该网格,有几个单元格不应更改

我可以简单地让事件处理程序在网格中更改数据后将其更改回正确的状态,但这似乎有问题,难以维护,并且不可读。有没有更好的办法?我阅读了API,但找不到任何有用的属性

更新


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

您可以指定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);

正如我从评论中了解到的,您希望使第一行不可编辑。有一个丑陋但快速的解决方案。在编辑前为插件
指定
处理程序。当触发事件时,检查正在编辑的行。如果第一个-
返回false

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

更新

文档说,
beforeedit
有这样一组参数:

beforeedit( Ext.grid.plugin.Editing editor, Object e, Object options )
但这是一个错误。正确的顺序是:

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

由于这一事实,我更新了示例。

因为魏子尧提到beforeEdit事件的文档是错误的。但是,您需要引用'editor'参数来获取行索引和其他值,而不是第一个对象参数'e'。 更新示例:

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

谢谢但是,我使用的是列模型,但我希望使第一行不可编辑。有没有类似的方法?我看过医生,这看起来很棒。但是,当我尝试向e.rowIdx发出警报时,它是未定义的。也许我的网格有问题?谢谢@紫瑶,那是因为文件中有错误。编辑前
中的第一个参数应为
e
,而
编辑器应位于第二位。我已经更新了我的答案。哇,太棒了!我想知道你是怎么发现这个错误的,但这确实解决了我的问题。非常感谢。