создание определенных ячеек ExtJS GridPanel un-editable

Question

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

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

Answer 2

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

Answer 3

В состоянии Документов

Если слушатель возвращает ложь редактор не будет активирован.

Итак ...

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

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

      return false; 

     } 
} 

Просто возвращение ложным будет достаточно, чтобы отменить возможность редактирования.

---

Gotcha.

Интересная идея - немного хлопот, чтобы реализовать, но возможно.

Вы должны подойти к этому с двух направлений:

1) редактировать начинает

2) установлен флажок/непроверенной

Для первой части, я думаю, вы могли бы использовать почти тот же код У меня выше, удалите «return false» и используйте ссылку на rowEditor, чтобы перебрать коллекцию элементов, отключив (вызовите метод disable на них) поля, которые не являются вашим полем.

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

Answer 4

Я столкнулся с той же проблемой. Вместо использования 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(); 
     } 
     } 
    } 
    }) 

Answer 5

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

ТОГДА

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