使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

只需将您的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 3

随着文档状态：

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

所以......

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

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

      return false; 

     } 
} 

简单地返回false将足以抵消编辑能力。

---

Gotcha。

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

你需要从两个方向接近这个：

1）编辑开始

2）复选框被选中/取消

在第一部分，我想你可以使用几乎相同的代码我有上面的，删除'返回false'，并使用rowEditor的引用来循环通过项目集合，禁用（调用他们的禁用方法）不是您的复选框字段的字段。

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

Answer 4

我遇到了同样的问题。我没有使用带有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 5

哈！ 我做了一个肮脏的，我添加了一个事件this.fireEvent（'开始'，这个，领域，记录）; AT 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（ '开始'，这，字段，记录）; } }

THEN

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 6

以下工作作出具体小区不可编辑的（事件添加到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 7

使用的Ext JS 4和RowEditing插件我设法使用类似

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

记录的数据可通过context.record.data

Answer 8

由于ExtJS的3.4，你可以只覆盖的isCellEditable，在这里的例子：

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

Answer 9

下面是简单的版本：

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