haciendo que ciertas celdas de un ExtJS GridPanel no se puedan editar

Question

Actualmente tengo un GridPanel con el complemento Ext.ux.RowEditor. Existen cuatro campos en el editor de filas: puerto, dirección IP, subred y DHCP. Si el campo DHCP (casilla de verificación) de la fila seleccionada está marcado, necesito que los otros tres campos no sean editables.

He intentado realizar este código cuando se desencadena el evento beforeedit, pero fue en vano ... Solo he encontrado formas de hacer que toda la columna no se pueda editar. Mi código hasta ahora:

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

Háganme saber si es necesario hacer alguna aclaración.

¡También se agradecería cualquier ayuda que potencialmente extienda RowEditor para lograr la funcionalidad objetivo!

Answer 1

Puede añadir en RowEditor.js dentro de la función startEditing la llamada a la función 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; 
      } 
//.... 

Entonces anulan la isCellEditable de su modelo de columna y desactivado el campo basado en que condición:

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

simplemente configure la columna en su columnModel/columns en editable: false para los campos que no deberían ser editables.

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

medida que el estado docs:

Si el oyente devuelve falso no se activará el editor.

Entonces ...

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

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

      return false; 

     } 
} 

Simplemente volviendo falsa será suficiente para anular la capacidad de edición.

---

Gotcha.

Idea interesante: un poco complicada de implementar, pero posible.

es necesario acercarse a esto desde dos direcciones:

1) edición comienza

2 casilla de verificación) se comprueba/sin control

Para la primera parte, creo que se podría utilizar casi el mismo código Tengo arriba, elimine el 'return false' y use la referencia al rowEditor para recorrer la colección de elementos, deshabilitando (llame al método de deshabilitación en ellos) los campos que no son su campo de casilla de verificación.

La segunda parte de esto es agregar un controlador a la casilla de verificación que haría lo mismo.

Answer 4

Me encontré con el mismo problema. En lugar de usar GridPanel con el complemento Ext.ux.RowEditor, utilicé Ext.grid.EditorGridPanel.En este caso, se puede especificar el editor para cada uno de los otros tres campos (puerto, dirección IP y subred) en el modelo de la columna con un controlador de eventos beforeshow de la siguiente manera:

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

Answer 5

Ja! Hice uno sucio, agregué un evento this.fireEvent ('starting', this, fields, record); Al final de 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 ('partir', esto, campos, registro); } }

ENTONCES

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

las siguientes obras para hacer una célula específica no editable (añadir el evento a la 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

Usando Ext JS 4 y el plugin RowEditing i logró lograr esto usando algo como

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

los datos de registro está disponible a través context.record.data

Answer 8

A partir de ExtJS 3.4 sólo se puede anular isCellEditable, como en el ejemplo aquí:

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

Answer 9

Aquí está la versión más simple:

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

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

Proporcionar la condición abajo para que las células se hacen del no editable:

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