rendant certaines cellules d'un ExtJS GridPanel non modifiable

Question

J'ai actuellement un GridPanel avec le plugin Ext.ux.RowEditor. Quatre champs existent dans l'éditeur de ligne: port, adresse IP, sous-réseau et DHCP. Si le champ DHCP (case à cocher) de la ligne sélectionnée est coché, je dois rendre les trois autres champs non éditables.

J'ai essayé d'exécuter ce code lorsque l'événement BeforeEdit est déclenché, mais en vain ... Je n'ai trouvé des façons de faire toute la colonne non modifiable. Mon code jusqu'à présent:

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

Veuillez me faire savoir si des éclaircissements sont nécessaires.

Toute aide potentiellement étendre RowEditor pour atteindre la fonctionnalité cible serait grandement apprécié aussi bien!

Answer 1

Vous pouvez ajouter dans RowEditor.js dans la fonction startEditing l'appel à la fonction 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; 
      } 
//.... 

outrepasser ensuite le isCellEditable de votre modèle de colonne et désactivé le champ en fonction vous état:

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

vient définir la colonne dans vos columnModel/colonnes modifiable: false pour les champs qui ne doivent pas être modifiables.

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

Comme l'état docs:

Si l'auditeur retourne false l'éditeur ne sera pas activé.

Alors ...

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

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

      return false; 

     } 
} 

retourner tout simplement faux sera suffisant pour annuler la capacité d'édition.

---

Gotcha.

Idée intéressante - un peu de tracas à mettre en œuvre, mais possible.

Vous devez aborder ce dans deux directions:

1) modifier commence

2) case est cochée/décochée

Pour la première partie, je pense que vous pouvez utiliser presque le même code J'ai ci-dessus, supprimez le 'return false' et utilisez la référence à rowEditor pour faire défiler la collection d'éléments, en désactivant (appelez la méthode disable sur eux) les champs qui ne sont pas votre case à cocher.

La deuxième partie de c'est d'ajouter un gestionnaire à la case à cocher qui ferait la même chose.

Answer 4

J'ai rencontré le même problème. Plutôt que d'utiliser le GridPanel avec le plugin Ext.ux.RowEditor, j'ai utilisé le Ext.grid.EditorGridPanel.Dans ce cas, vous pouvez spécifier l'éditeur pour chacun des trois autres champs (le port, l'adresse IP et sous-réseau) dans le modèle de la colonne avec un gestionnaire d'événements beforeshow comme suit:

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! J'ai fait un sale, j'ai ajouté un événement this.fireEvent ('starting', this, fields, record); À la fin 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 ('départ', ce, champs, record); } }

ALORS

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

Les travaux suivants pour faire une cellule spécifique non modifiable (ajouter l'événement à l'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

L'utilisation Ext JS 4 et le plugin RowEditing i réussi à réaliser cela en utilisant quelque chose comme

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

les données d'enregistrement est disponible via context.record.data

Answer 8

Au ExtJS 3.4, vous pouvez simplement remplacer isCellEditable, comme dans l'exemple ici:

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

Answer 9

est ici la version plus simple:

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

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

Fournir la condition ci-dessous pour les cellules pour rendre le non modifiable:

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