使 ExtJS GridPanel 的某些单元格不可编辑

Question

我目前有一个带有 Ext.ux.RowEditor 插件的 GridPanel。行编辑器中有四个字段：端口、IP 地址、子网和 DHCP。如果选中了所选行的 DHCP 字段（复选框），我需要将其他三个字段设为不可编辑。

我一直在尝试在触发 beforeedit 事件时执行此代码，但无济于事......我只找到了使整个列不可编辑的方法。到目前为止我的代码：

this.rowEditor.on({
    scope: this,
    beforeedit: this.checkIfEditable
});

checkIfEditable:function(rowEditor, rowIndex) {
    if(this.getStore().getAt(rowIndex).get('dhcp')) {
        // this function makes the entire column un-editable:
        this.getColumnModel().setEditable(2, false); 

        // I want to make only the other three fields of the current row 
        // uneditable.
    }
 }

如果需要任何澄清，请告诉我。

任何可能扩展 RowEditor 以完成目标功能的帮助也将不胜感激！

Answer 1

您可以在函数startEditing 中添加对函数isCellEditable 的调用

//.... RowEditor.js
startEditing: function(rowIndex, doFocus){
//.... search for the starting of the below loop into the source code
            var cm = g.getColumnModel(), fields = this.items.items, f, val;
            for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                val = this.preEditValue(record, cm.getDataIndex(i));
                f = fields[i];
                f.setValue(val);

                // *** here add a call to isCellEditable *** //
                f.setDisabled(!cm.isCellEditable(i, rowIndex));
                // ***************************************** //

                this.values[f.id] = Ext.isEmpty(val) ? '' : val;
            }
//....

然后覆盖您的列模型的isCellEditable 并根据您的条件禁用该字段：

YYY.getColumnModel().isCellEditable = function(colIndex, rowIndex){
 if (grid.getStore().getAt(rowIndex).get('dhcp')) {
    // you can do more check base on colIndex
    // only to disabled the one you want
    return false; 
  }
  return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, colIndex, rowIndex);
}

Answer 2

如文档所述：

如果监听器返回 false 编辑器不会被激活。

所以...

this.rowEditor.on({
      scope: this,
     beforeedit: this.checkIfEditable
});

checkIfEditable:function(rowEditor, rowIndex) {
         if(this.getStore().getAt(rowIndex).get('dhcp')) {

             return false; 

         }
 }

只需返回 false 即可取消编辑功能。

---

明白了。

有趣的想法 - 实施起来有点麻烦，但可能。

您需要从两个方面着手：

1) 编辑开始

2 ) 复选框被选中/取消选中

对于第一部分，我认为您可以使用与上面几乎相同的代码，删除“return false”并使用对 rowEditor 的引用来循环遍历项目集合，禁用（调用它们的禁用方法）不是您的复选框字段的字段。

第二部分是为复选框添加一个处理程序，它会做同样的事情。

Answer 3

以下工作使特定单元格不可编辑（将事件添加到行编辑器）：

    beforeedit: function (roweditor, rowIndex) {
        var data = roweditor.grid.store.getAt(rowIndex).data;
        var cm = roweditor.grid.getColumnModel();

        // disable the first column (can not be edited)
        if (** make your check here ***) {
            var c = cm.getColumnAt(0);
            c.editor.disable();
        }
        roweditor.initFields();
    }

Answer 4

从 ExtJS 3.4 开始，您可以只覆盖 isCellEditable，如下例所示：

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.grid.ColumnModel-method-isCellEditable

Answer 5

这是更简单的版本：

http://jsfiddle.net/snehalmasne/8twwywcp/

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
        ,pluginId: 'editing'
    })
]

为单元格提供以下条件以使不可编辑：

grid.on('beforeedit', function(editor, e) {
  if (e.record.get('phone') == '555-111-1224')
    return false;
});

Answer 6

只需将 columnModel/columns 中的列设置为可编辑：对于不应编辑的字段为 false。

columns: [ 
  { header: "Ticker", width: 60, editable:false },
  { header: "Company Name", width: 150, id: 'company'},
  { header: "Market Cap."},
  { header: "$ Sales", renderer: money},
  { header: "Employees", resizable: false}
]

Answer 7

我遇到了同样的问题。我没有使用带有 Ext.ux.RowEditor 插件的 GridPanel，而是使用了 Ext.grid.EditorGridPanel。在这种情况下，您可以使用 beforeshow 事件处理程序为列模型中的其他三个字段（端口、IP 地址和子网）中的每一个指定编辑器，如下所示：

  editor: new Ext.form.TextArea({
    height:80,
    allowBlank: false,
    listeners:{
      beforeshow: function(column) {
        if (column.gridEditor.record.get('dhcp')) {
          column.gridEditor.cancelEdit();
        }
      }
    }
  })

Answer 8

哈！ 我做了一个脏的，我添加了一个事件 this.fireEvent('starting', this, fields,record);在开始编辑结束时

startEditing: function(rowIndex, doFocus){
    if(this.editing && this.isDirty()){
        this.showTooltip(this.commitChangesText);
        return;
    }
    if(Ext.isObject(rowIndex)){
        rowIndex = this.grid.getStore().indexOf(rowIndex);
    }
    if(this.fireEvent('beforeedit', this, rowIndex) !== false){
        this.editing = true;
        var g = this.grid, view = g.getView(),
            row = view.getRow(rowIndex),
            record = g.store.getAt(rowIndex);

        this.record = record;
        this.rowIndex = rowIndex;
        this.values = {};
        if(!this.rendered){
            this.render(view.getEditorParent());
        }
        var w = Ext.fly(row).getWidth();
        this.setSize(w);
        if(!this.initialized){
            this.initFields();
        }
        var cm = g.getColumnModel(), fields = this.items.items, f, val;
        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
            val = this.preEditValue(record, cm.getDataIndex(i));
            f = fields[i];
            f.setValue(val);
            this.values[f.id] = Ext.isEmpty(val) ? '' : val;
        }
        this.verifyLayout(true);
        if(!this.isVisible()){
            this.setPagePosition(Ext.fly(row).getXY());
        } else{
            this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
        }
        if(!this.isVisible()){
            this.show().doLayout();
        }
        if(doFocus !== false){
            this.doFocus.defer(this.focusDelay, this);
        }
        /*I ADDED THIS EVENT ---- contains the fields and record

*/ this.fireEvent('starting', this, fields,record); } }

那么

var editor = new Ext.ux.grid.RowEditor({
    saveText: 'Update',
    listeners : {
        'starting' : function(rowEditor, fields, record){
            if(!record.data.equipo_id){
                fields[4].setDisabled(false);
            }else{
                fields[4].setDisabled(true);
            }
        },

Answer 9

使用 Ext JS 4 和 RowEditing 插件我设法使用类似的东西来实现这一点

rowEditor.on('beforeedit', function (context) {
       this.editor.query('textfield')[0].setDisabled(/* your condition here */);
});

记录数据可通过 context.record.data 获得