使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獲得