Contrôle d'édition personnalisé dans une grille de l'éditeur ExtJS

Question

Vous avez un problème et avez besoin de vos conseils

Je viens de commencer à écrire une grille d'éditeur. (J'utiliserai cette grille en tant qu'éditeur de filtre de recherche, c'est-à-dire des colonnes avec un nom de critère, des opérateurs et des valeurs). Maintenant, pour le champ de valeur, je veux avoir différents contrôles d'édition pour différentes lignes. Par exemple, quand un type de critère est une chaîne, je veux afficher une zone de texte, quand c'est l'heure de la date, je veux un éditeur de datetime. Donc le fait est que j'ai besoin de contrôler la "création/affichage du contrôle d'édition" juste avant le début de l'édition. et il devrait être différent entre les rangées. Contrairement aux exemples que j'ai trouvés qui sont fixés pour les colonnes.

Pour mettre en œuvre ceci, pouvez-vous suggérer les étapes que je dois faire? Je peux probablement comprendre si l'un d'entre vous peut me diriger d'une manière.

Merci et meilleures salutations

Answer 1

En fait, vous pouvez facilement y arriver en retournant dynamiquement différents éditeurs et rend en fonction de la colonne dans laquelle vous vous trouvez. Dans votre objet ColumnModel, vous pouvez définir quelque chose comme ci-dessous. Notez que j'obtiens une propriété type de chaque enregistrement pour déterminer son type. J'ai un objet contenant tous mes différents types d'éditeurs, et la même chose pour les moteurs de rendu, et puis, basé sur le type, je crée un éditeur ou un moteur de rendu différent pour cette cellule.

editors: { 'default': {xtype:'textfield'}, 
      texttype: {xtype:'textfield'}, 
      numbertype: {xtype:'numberfield'}, 
      combotype: {xtype:'combo'}....... etc. } 

getCellEditor: function(colIndex, rowIndex) { 
      var store = Ext.getCmp('mygrid').getStore(); 
      var field = this.getDataIndex(colIndex); 
      var rec = store.getAt(rowIndex); 
      var type = rec.get('type'); 
      if (type in this.editors) { 
       return this.editors[type]; 
      } else { 
       return this.editors['default']; 
      } 

     }, 

Answer 2

Dans la section de configuration de votre editorgrid, vous devez définir vos éditeurs personnalisés:

{ 
    xtype: 'editorgrid', 
    id : 'mygridID', 
    stripeRows: true, 
    ... 
    ... 
    ,customEditors : { 
    //configs go here or pre-define the configs prior to this 
    'columnName1' : new Ext.grid.GridEditor(new Ext.form.Combobox(configObject)), 

    //configs go here or pre-define the configs prior to this 
    'columnName7' : new Ext.grid.GridEditor(new Ext.form.CheckBox(configObject)) 
    } 
} 

Answer 3

utiliser cette configuration de grille - afin de sélectionner des lignes entières:

selType: 'rowmodel'