javascript - 使 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);
}