Dokonywanie niektórych komórek z ExtJS GridPanel un-editable

Question

Mam obecnie GridPanel z wtyczką Ext.ux.RowEditor. W edytorze wierszy istnieją cztery pola: port, adres IP, podsieć i DHCP. Jeśli pole DHCP (pole wyboru) zaznaczonego wiersza jest zaznaczone, muszę uniemożliwić edycję pozostałych trzech pól.

Próbowałem wykonać ten kod po uruchomieniu zdarzenia beforeedit, ale bezskutecznie. Znalazłem tylko sposoby, aby uczynić całą kolumnę nie do edycji. Mój kod do tej pory:

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. 
    } 
} 

Proszę dać mi znać, jeśli jakieś wyjaśnienie jest potrzebne.

Każda pomoc potencjalnie rozszerzająca RowEditor w celu osiągnięcia docelowej funkcjonalności również byłaby bardzo doceniana!

Answer 1

Można dodać do RowEditor.js wewnątrz funkcji startEditing wywołanie funkcji 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; 
      } 
//.... 

Następnie zastąpić isCellEditable danego modelu kolumny i niepełnosprawnych dziedzinie na podstawie ciebie warunkiem:

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

wystarczy ustawić kolumnę w kolumnie/kolumnach do edycji: wartość false dla pól, które nie powinny być edytowalne.

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

Jak stanu docs:

Jeżeli słuchacz zwraca false redaktor nie zostanie aktywowana.

Więc ...

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

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

      return false; 

     } 
} 

Wystarczy powrocie fałszywe będą wystarczające, aby anulować możliwość edycji.

---

Gotcha.

Interesujący pomysł - trochę trudu do wdrożenia, ale możliwe.

Trzeba podejść do tego z dwóch kierunków:

1) edycja rozpoczyna

2) pole wyboru jest zaznaczone/niezaznaczone

Dla pierwszej części, myślę, że można użyć niemal ten sam kod Mam powyżej, usuń "return false" i użyj odnośnika do rowsEditor, aby przeglądać kolekcję przedmiotów, wyłączając (wywołaj metodę disable na nich) pola, które nie są polami wyboru.

Druga część tego polega na dodaniu modułu obsługi do pola wyboru, które zrobiłoby to samo.

Answer 4

Wpadłem na ten sam problem. Zamiast używać GridPanel z wtyczką Ext.ux.RowEditor, użyłem Ext.grid.EditorGridPanel.W tym przypadku można określić edytor dla każdego z pozostałych trzech pól (port, adres IP i podsieci) w kolumnie z modelu obsługi zdarzeń beforeshow następująco:

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

Answer 5

Ha! Zrobiłem brudną, dodałem wydarzenie this.fireEvent ("start", to, pola, rekord); Pod koniec 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 ('rozpoczynający się w tym, pola, rekord); } }

WTEDY

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

następujące prace, aby konkretną komórkę zablokowany do edycji (dodać wydarzenie do 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

Korzystanie Ext JS 4 i wtyczki RowEditing í udało się to osiągnąć, stosując coś w rodzaju:

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

rekord danych jest dostępna za pośrednictwem context.record.data

Answer 8

Od ExtJS 3.4 można po prostu zastąpić isCellEditable, jak na przykład tutaj:

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

Answer 9

tutaj jest prostsza wersja:

http://jsfiddle.net/snehalmasne/8twwywcp/

plugins: [ 
    Ext.create('Ext.grid.plugin.CellEditing', { 
     clicksToEdit: 1 
     ,pluginId: 'editing' 
    }) 
] 

podać stan poniżej komórki, aby un-edycji:

grid.on('beforeedit', function(editor, e) { 
    if (e.record.get('phone') == '555-111-1224') 
    return false; 
});