Discussion :

[Chen norris]

Bonjour à tous,

Travaillant avec ExtJs 4.2, je dois développer un écran sur lequel on retrouve 4 onglets, le premier conditionnant l'accès aux trois autres. Visuellement, voici à quoi doit ressembler mon interface :

Code :

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

1
2
3
    ‚--------------+--------------+--------------+--------------‘
    |   Onglet 1   |   Onglet 2   |   Onglet 3   |   Onglet 4   |
----'              '--------------+--------------+--------------+----

désolé pour mon ASCII-art, j'ai fait avec les moyens du bord sachant que les caractères ┌, ┐, ┬, ┴, … ne s'affichaient pas dans la balise [code]

Onglet 1 contient une grille qui lui est propre, onglets 2, 3 et 4 contiennent chacun leur grille qui suivent le même modèle. J'ai donc étendu deux fois Ext.grid.Panel : une première fois pour mon onglet 1 et une seconde fois pour mes onglets 2, 3 et 4. Concrètement, j'ai donc deux fichiers de ce style :

Code :

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

1
2
3
4
5
6
Ext.define("StructureOngletA", { // et Ext.define("StructureOngletB" dans l'autre fichier
    extend: "Ext.grid.Panel",
    config: {
        ... // je ne détaille pas cette partie
    }
});

et je les instancie de la manière suivante dans ma page :

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
var onglet1 = Ext.create("StructureOngletA", {
    id: "onglet1"
    title: "Onglet 1"
});
 
var onglet2 = Ext.create("StructureOngletB", {
    id: "onglet2"
    title: "Onglet 2"
});
 
var onglet3 = Ext.create("StructureOngletB", {
    id: "onglet3"
    title: "Onglet 3"
});
 
var onglet4 = Ext.create("StructureOngletB", {
    id: "onglet4"
    title: "Onglet 4"
});

Plus loin dans ma page, je retrouve mes onglets dans un tabpanel via l'instruction suivante :

Code :

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

1
2
3
4
5
6
    ...
    id: "onglets",
    itemId: "onglets",
    items: [ onglet1, onglet2, onglet3, onglet4 ],
    xtype: "tabpanel"
    ...

Niveau présentation, aucun souci, tout s'affiche comme je le souhaite. Mais dès que je clique sur l'onglet 2 pour en afficher le contenu, j'ai une grosse erreur TypeError: ownerCt.el is undefined qui apparaît dans ma console Javascript et disparition de mes onglets. Même chose si je clique sur l'onglet 3. Le seul contournement que j'ai trouvé pour résoudre mon souci, c'est de d'abord cliquer sur onglet 4 (donc le dernier), et je peux alors naviguer librement entre mes onglets.
Quelqu'un aurait une idée d'où vient mon problème ?

Début de piste : j'ai fait un autre essai en diminuant le nombre d'onglets (onglet 1, onglet 2 et onglet 3) et mon problème est cette fois contournable en cliquant sur l'onglet 3 (toujours le souci en cliquant sur l'onglet 2). En gros, il faut d'abord que j'ouvre la dernière instance de StructureOngletB pour ne pas avoir ce problème, comme si le conteneur (ownerCt) était enregistré uniquement sur la dernière instance...

Je ne vous ai pas collé le détail de la console Javascript : j'ai une succession de lignes issues de ext-all-debug.js (j'ai déjà regardé dedans mais les appels étant très génériques, ça n'est pas du tout parlant). Dans le doute, voici quand même la ligne à laquelle l'erreur JS se déclenche :

Code :

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

1
2
3
if (!ownerCtContext && (ownerCt = target.ownerCt)) {
    ownerCtContext = me.context.items[ownerCt.el.id]; // c'est cette ligne-là
}

En debug, au moment où la ligne plante, ownerCt = mon dernier onglet de type StructureOngletB.

Une autre piste : si je déclare autant de classes différentes que j'ai d'onglets (StructureOngletB1, StructureOngletB2 et StructureOngletB3 respectivement pour mes onglets 2, 3 et 4), je n'ai plus le problème. Sauf que bon, copier/coller du code strictement identique, je pense qu'il y a plus propre pour contourner le souci...

En espérant que ce problème vous parlera plus qu'à moi, merci d'avance pour votre aide.

[Chen norris]

Après plusieurs heures de maux de têtes sur mon erreur, j'y suis allé pas à pas pour comprendre cette exception TypeError: ownerCt.el is undefined. J'ai donc radicalement modifié la structure des onglets qui me posaient problème en supprimant totalement leur contenu :

Code :

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

1
2
3
4
5
Ext.define("StructureOngletB", {
    extend: "Ext.panel.Panel", // Ext.panel.Panel à la place d'un Ext.grid.Panel
    config: {
    }
});

J'ai aussi modifié la classe étendue puisque Ext.grid.Panel nécessite la configuration de colonnes (or comme j'avais tout viré...). Et là, c'est passé.

En modifiant petit à petit mon composant StructureOngletB et en testant à chaque étape, j'ai fini par trouver le coupable : c'était une toolbar déclarée comme ceci :

Code :

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

1
2
3
4
5
6
7
8
Ext.define("StructureOngletB", {
    extend: "Ext.grid.Panel",
    config: {
        bbar: new Ext.toolbar.Toolbar({
            ...
        }),
    }
});

J'ai lu quelque part sur le net qu'utiliser l'opérateur new était moins bien géré d'un point de vue mémoire par ExtJS que lorsqu'on passait par xtype. En faisant un test un peu au hasard sur un JSFiddle, je me suis rendu compte que dans la déclaration d'un composant, ExtJS ne créait qu'une seule instance des éléments déclarés avec new… logique… En effet, en déclarant cette fois ma toolbar dans une propriété dockedItems avec xtype: "toolbar", ça marche !!

En espérant que ce post évitera des arrachages de cheveux à ceux qui tomberont sur le même problème…