使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

您可以在函数内添加RowEditor.js 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);
}