[ExtJS 4.2.1] Onglets qui disparaissent
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:
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:
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:
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:
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:
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.
