Pourquoi Est-ce que Ext JS 3.0 casse mon champ de saisie de filtre de grille ?

Question

Voici un extrait de code, inséré immédiatement après la création de ma grille, qui fonctionnait bien sous 2.0:

var gridFilter = Ext.get(gridToolbar.addDom({ tag: "input", 
    type: "text", 
    size: "25", 
    value: "", 
    cls: "x-grid-filter"}).el);
gridFilter.on("focus", function(){this.dom.select();});

Maintenant, j'obtiens une erreur JavaScript sur la deuxième instruction : "gridFilter est null".

Est-ce que j'ai manqué une mise en garde importante concernant la compatibilité ascendante de la version 3.0 ?

Ceci a été adapté à partir d'un code source trouvé sur le site Ext JS, donc je ne pensais pas faire quelque chose de terriblement ésotérique.

À part ce qui précède, gridToolbar fonctionne bien, et le champ d'entrée ajouté à la barre d'outils dans la première ligne apparaît bien dans le navigateur. Je pense donc que quelque chose doit être fondamentalement différent avec addDom() ou Ext.get() qui casse mon code.

Answer 1

Comme je ne peux pas voir l'ensemble de votre code, je suppose que votre code ne respecte pas le fait que la barre d'outils doit être rendue avant d'appeler addDom(), et que le code fonctionnait "par accident" dans Ext2. Une raison de cette incompatibilité de version peut être la modification du rendu entre les versions de ext. Ce qui était rendu dans Ext2 pourrait ne pas encore avoir été rendu dans Ext3.

Exemple de correction que vous pouvez essayer:

gridToolbar.on("render", function() {

    var gridFilter = Ext.get(gridToolbar.addDom({ tag: "input", 
        type: "text", 
        size: "25", 
        value: "", 
        cls: "x-grid-filter"}).el);

    gridFilter.on("focus", function(){this.dom.select();});

});

Answer 2

J'ai compris comment le faire fonctionner à nouveau :

function getGridFilterBox(filterid, width, defaultvalue) {
    // Retourne une boîte de filtrage de base qui peut être utilisée pour filtrer une grille
    return {
        id: filterid,
        tag:    'input',
        type:   'text',
        size:   width || 25,
        value:  defaultvalue || '',
        cls:    'x-grid-filter'
        }
    }

function SetupGridFilter(filterid, gridToReload, ds) {
    // Configure le filtrage au clavier et par paramètre pour une boîte de filtrage de base sur une barre d'outils de grille
    var filter = Ext.get(filterid);
    filter.on('keyup', function(e) {
        var key = e.getKey(); // La touche ENTER filtre, tout comme la touche de retour ou suppression si la valeur est vide
        if((key== e.ENTER)||((key == e.BACKSPACE || key == e.DELETE) && this.getValue().length == 0)) { reloadGrid(gridToReload); }
        });
    filter.on('focus', function(){this.dom.select();}); // configuration d'un gestionnaire d'événements onfocus pour sélectionner le texte dans le champ
    ds.on('beforeload', function() { ds.baseParams.searchPhrase = filter.getValue(); });
    }

Ensuite, ailleurs, au milieu d'une spécification de Viewport :

thisGrid = new Ext.grid.GridPanel({
   tbar: new Ext.Toolbar({items: ["-",
       getGridFilterBox("myfilter")] }),
   })

Enfin, après le Viewport :

thisGrid.show();
SetupGridFilter("myfilter", thisGrid, gridData);