Discussion :

[Chen norris]

Bonjour à tous,

Je dois développer avec ExtJS une simple grille avec possibilité de sélectionner les lignes avec des cases à cocher. J'ai donc créé un Ext.grid.Panel avec comme selModel un Ext.selection.CheckboxModel comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
var monSelectionModel = Ext.create("Ext.selection.CheckboxModel", {
    checkOnly: false,
    mode: "MULTI",
    showHeaderCheckbox: true
});
 
var maGrille = new Ext.grid.Panel({
    ...
    listeners: {
            /**
             * Au moment où la sélection change, je veux activer/désactiver le bouton de suppression dans la barre d'outils.
             * @param me : le modèle de sélection courant.
             * @param selected : la sélection.
             * @param options : options supplémentaires liées à l'événement.
             */
            selectionchange: function(me, selected, options) {
                Ext.getCmp("boutonSuppression").setDisabled(selected.length === 0);
            }
        },
        selModel: monSelectionModel,
    ...
});

Quand l'écran s'affiche pour la première fois, tout fonctionne parfaitement. Mais là où ça se complique, c'est quand je vais ailleurs et que je reviens sur mon écran : la sélection se met à faire n'importe quoi (les éléments sélectionnés se déplacent tout en bas de ma grille) et l'événement de sélection n'a plus aucun effet sur mon bouton de suppression (comme si Ext.getCmp("boutonSuppression").setDisabled agissait sur une ancienne référence).

Je me suis documenté sur la notion de prototypes apportée par la version 4 d'ExtJS avec cet article, article qui m'a fait comprendre qu'il fallait déclarer mon selectionModel non pas directement avec la propriété selModel de ma grille mais en dehors (sauf que déclarer mon selectionModel en dehors a induit ce fameux bug d'affichage de déplacement des éléments sélectionnés en bas de ma grille).

Deux questions donc :

• comment résoudre ce bug d'affichage des éléments sélectionnés qui se "déplacent" tout en bas de ma grille ?
• comment faire fonctionner mon listener correctement ?

En espérant avoir été clair dans la description de mon problème (pas évident ^^), merci d'avance pour vos réponses.

[Chen norris]

Bon, premier élément de réponse trouvé sur le net : l'utilisation des id est à proscrire avec ExtJS, car d'un chargement à l'autre d'une même page, on ne pointe plus sur la même instance. Il faut donc utiliser itemId :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
var toolbarPanier = new Ext.toolbar.Toolbar({
    itemId: "maToolbar",
    items: [{
        disabled: true,
        handler: suppression,
        iconCls: "remove",
        itemId: "monBouton",
        xtype: "button"
    }]
});

Et pour cibler le bouton, ne pas utiliser Ext.getCmp("monBouton") du coup mais Ext.ComponentQuery.query("#maToolbar > #monBouton")[0].

Pour ce qui est des lignes sélectionnées qui se mettent à se déplacer tout en bas de ma grille par contre, je n'ai pas encore trouvé de solution.

[Chen norris]

Re-bonjour à tous,

Finalement, la solution a été de ne pas déclarer mon selectionModel dans mon panel mais de le déclarer dans une variable à part. Ensuite, dans la config du panel, il fallait mettre cette variable en tant que valeur pour selModel. En effet, ExtJS considère la config comme locale à l'instance et lorsqu'il réafffiche le panel, il repart sur une autre instance.
Au passage, même remarque pour les listeners : mieux vaut les déclarer en dehors des objets avec un monObjet.on("événement observé", function() ... car là encore, ExtJS semble rattacher le listener à l'instance, instance qu'il ne réutilise plus par la suite.

Je m'abstiendrai bien évidemment de tout commentaire sur la logique de ce framework…
Courage en tous cas à ceux qui rencontreraient des problèmes similaires et en espérant que mon post de solution les aura aidé.

[sekaijin]

Oui sorry pour mon passage tardif.

de façon générale Les différents composants utilisent des références sur des objets.
ces objets doivent être déclaré à un moment ou un autre.

lorsqu'on utilise les attributs de la config d'un composants pour qu'il crée les objets dans la méthode de construction
la portée (visibilité) de ces objets est locale à la fonction de construction.

à chaque invocation du constructeur une nouvelle instance est crée.

c'est pour cette raison que l'on trouve dans beaucoup d'exemples la création d'objet dans le code puis l'utilisation de ces objets en référence pour construire un composant.

quant au listeners il est recommandé d'utiliser le contrôleur ainsi pour ton problème
le contrôleur réagit lors d'un changement d'état de la sélection. et c'est lui qui mets à jour la vue.

de cette façon il n'y a pas de lien entre le selectModel et la toolbar.

A+JYT

[Chen norris]

Oui sorry pour mon passage tardif.

Pas de souci j'ai fini par trouver la solution par même ce qui au final aura été plus formateur

Et effectivement, avec ExtJS, il faut faire attention aux mauvaises pratiques notamment avec la notion d'instance / prototype (avec JS d'une manière générale). J'ai pris jusqu'à maintenant la mauvaise habitude de vouloir garder un code condensé "par paquet", c'est-à-dire en mettant tout ce qui concerne un composant dans sa déclaration (présentation, listeners, toolbar, …) or comme tu dis, il est préférable de les séparer de manière à être sûr de travailler à chaque fois sur la bonne instance.