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

Ext-JS: How to disable cell editing for individual cells in a grid?

本文关键字：单元格 单个 编辑 网格 何禁用 Ext-JS      更新时间：2023-09-26

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

为了使网格可编辑，我遵循API文档并使用了以下命令:

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

然而，对于这个网格，有几个单元格是不应该被改变的。

我可以简单地让事件处理程序在数据在网格中被更改后将其更改回正确的状态，但这似乎很糟糕，难以维护，而且不可读。有更好的方法吗?我读了API，但找不到任何有用的属性。

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

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

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

查看beforeedit的文档

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

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

但是有错误。正确的顺序是:

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

我已经更新了这个例子，因为这个事实。

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

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

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