如何以编程方式禁用Ext.grid.EditorGridPanel中的单元格

How to programmatically disable cells in a Ext.grid.EditorGridPanel

本文关键字:EditorGridPanel grid 单元格 Ext 编程 方式禁      更新时间:2023-09-26

我有一个使用ExtJS 4的web应用程序,它包含了Ext.grid.EditorGridPanel。

Ext.grid.EditorGridPanel的一列有一个组合框编辑器,我想在基于存储中另一个字段的值加载存储时以编程方式禁用该编辑器。

这看起来应该很简单-但到目前为止似乎没有任何工作。

当网格的存储加载时,我有一个监听器来检查每一行,并根据另一个字段的值禁用索引4中的组合框。

我唯一不能做的就是禁用组合框。

有什么建议吗?

下面是伪代码。提前感谢

listeners: {
    'load': function(st, records, options) {
        var view = getMyEditorGridPanel().getView();
        for (var i = 0; i < this.getCount(); i++) {             
            if (store.getAt(i).get('setDisabled') === 'Y') {

                //The cell at index 4 has a combobox editor - I CAN'T GET IT TO DISABLE!!
                view.getCell(i,4).setDisabled(true);
            }
        }
     }

从我的角度来看,你有两种不同的东西你需要在这里管理:

  1. 单元格样式,单元格未被编辑时的样子(启用或禁用)
  2. 编辑器可用性,当单元格即将被编辑时如何反应(应该可以编辑单元格)

细胞样式

对于第一个,我建议为每个单元提供一个样式,以便使它看起来禁用,这可以在渲染时间期间实现,而不是在存储加载时尝试这样做(btw没有什么能确保您在获得加载事件回调之后完全渲染网格项)。通过提供Ext.grid.ViewView. .getRowClass的实现,可以每行返回一个自定义类。

viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store) {
            return record.get("disabled") ? "mail-disabled" : "";
        }
    }

编辑器可用性

您还需要处理Ext.grid.plugin.CellEditingViewbeforeeditevent提供自定义逻辑来确定编辑器何时可用

 plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1,
        listeners: {
            beforeedit: function(editor, e, eOpts) {                
                return e.record.get("disabled") == false;
            }
        }
    })]

您可以在这里找到两个解决方案的工作示例,希望它有助于解决您的问题。