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