使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添加到RowEditor.js中，调用函数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的引用来循环遍历items集合，禁用（对它们调用disable方法）的字段不是你的复选框字段。

第二部分是向复选框添加一个处理程序，它可以执行相同的操作。

Answer 3

以下工作使特定单元格无法编辑（将事件添加到roweditor）：

    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

这是更简单的版本：

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 5

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

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

Answer 6

只需将columnModel / columns中的列设置为editable：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.grid.EditorGridPanel，而不是将GridPanel与Ext.ux.RowEditor插件一起使用。 在这种情况下，您可以使用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结束时

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获得