Что некоторые ячейки ExtJS GridPanel не редактируются

В настоящее время у меня есть GridPanel с плагином Ext.ux.RowEditor. В редакторе строк есть четыре поля: порт, 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 для достижения целевых функциональных возможностей, также будет очень признательна!

ОТВЕТЫ

Ответ 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);
}

Ответ 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 для циклического перемещения коллекции элементов, отключение (вызов метода disable на них) поля, которые не являются полем поля.

Вторая часть этого - добавить обработчик к флажку, который будет делать то же самое.

Ответ 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();
    }

Ответ 5

Здесь более простая версия:

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

Ответ 6

просто установите столбец в столбцеModel/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}
]

Ответ 7

Я столкнулся с той же проблемой. Вместо использования GridPanel с плагином Ext.ux.RowEditor я использовал Ext.grid.EditorGridPanel. В этом случае вы можете указать редактор для каждого из трех других полей (порт, IP-адрес и подсеть) в модели столбца с обработчиком события beforeshow следующим образом:

  editor: new Ext.form.TextArea({
    height:80,
    allowBlank: false,
    listeners:{
      beforeshow: function(column) {
        if (column.gridEditor.record.get('dhcp')) {
          column.gridEditor.cancelEdit();
        }
      }
    }
  })

Ответ 8

Ха! Я сделал грязный, я добавил событие this.fireEvent( "начало", это, поля, запись); НА КОНЕЦ 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( "начало", это, поля, запись);       }   }

ТОГДА

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

Ответ 9

Используя Ext JS 4 и плагин RowEditing, я смог достичь этого, используя что-то вроде

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

данные записи доступны через context.record.data​​p >