[Méthode] accéder à un component

[Siriru]

Bonjour,

imaginons un component Panel, ou peu importe lequel d'ailleurs avec un id: 'mon_id'

Dans un autre fichier .js, comment y accéder ? Car la méthode getCmp('mon_id') ne marche pas, alors qu'elle marche si elle est utilisée dans le même fichier.

[JulienFio]

Si si ça fonctionne très bien. Si pour toi ça ne fonctionne pas c'est que ton composant ne doit pas exister au moment où tu l'appelle, ou tu as un autre problème genre un mauvais include de ton .js, mais je te confirme que ça fonctionne.

[Siriru]

Humm, c'est bizarre, j'ai un fichier js qui instancie un Panel et un autre qui instancie un TreePanel. Mon but est de n'ajouter le TreePanel uniquement si j'inclue le fichier correspondant. J'ai donc mis juste après la définition du TreePanel

Code :

Ext.getCmp('id_panel').add(monTreePanel);

Dans ce cas ça ne marche pas, alors que le fichier js contenant la définition du panel est appelé en premier. Si je déplace cette méthode dans ce fichier, tout marche.

[JulienFio]

j'ai un fichier js qui instancie un Panel et un autre qui instancie un TreePanel. Mon but est de n'ajouter le TreePanel uniquement si j'inclue le fichier correspondant

C'est moi où ce n'est pas clair du tout ?

Si le rôle de ton .js est d'instancier ton TreePanel, forcement il ne sera instancié que si tu fait l'include du fichier ><

Bref.. Peux-tu poster le contenu (l'essentiel en tout cas) de tes .js et la façon (et l'ordre) dont tu les inclus ?

[Siriru]

Oui, le but est d'instancier le TreePanel, mais si je suis obligé de l'ajouter au panel dans un autre fichier, je vais avoir une belle erreur si jamais je ne l'inclus pas aussi.

bref, difficile d'être clair effectivement, voici mes fichiers :

fichier principal, inclu en premier :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var menu = new Ext.Panel({
    id:'menu-panel',
    region: 'west',
    title: 'Menu',
    border: false,
    collapsible: true,
    margins:'0 0 0 0',
    layout:'accordion',
    width: 200,
    minSize: 175,
    maxSize: 400,
  });
 
  Ext.getCmp('menu-panel').add(OutilsTreePanel);
 
  var viewport = new Ext.Viewport({
    id: 'viewport',
    layout: 'border',
    items: [ menu ]
  });

donc le but est de déplacer l'ajout de OutilsTreePanel dans le menu dans ce fichier :

Code :

1
2
3
4
5
var OutilsTreePanel = new TreePanel({
  id: 'treepanel-outils',
  title: 'Outils',
  iconCls: 'menu-outils'
});

[JulienFio]

Essayes comme ceci:

Code :

1
2
3
 
include monTreePanel.js  //ou pas d'include si tu ne le veux pas
include monPanel.js

dans monPanel.js

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var menu = new Ext.Panel({
    id:'menu-panel',
    region: 'west',
    title: 'Menu',
    border: false,
    collapsible: true,
    margins:'0 0 0 0',
    layout:'accordion',
    width: 200,
    minSize: 175,
    maxSize: 400,
  });
 
 
if(Ext.getCmp('treepanel-outils')){ //Si OutilsTreePanel existe alors je l'ajoute au panel Menu
    menu.add(OutilsTreePanel);
}
 
 
  var viewport = new Ext.Viewport({
    id: 'viewport',
    layout: 'border',
    items: [ menu ]
  });

Est-ce ça que tu cherches à faire ?

L'inverse est également possible:

Code :

1
2
3
 
include monPanel.js  //ou pas d'include si tu ne le veux pas
include monTreePanel.js

dans monTreePanel.js

Code :

1
2
3
4
5
6
7
8
9
var OutilsTreePanel = new TreePanel({
  id: 'treepanel-outils',
  title: 'Outils',
  iconCls: 'menu-outils'
});
 
if(Ext.getCmp('menu-panel')){ //Si le panel menu existe alors j'ajoute le TreePanel
Ext.getCmp('menu-panel').add(OutilsTreePanel);
}

[Siriru]

Oui, j'ai pensé à cette façon de faire et celle là que j'ai adopté au final. Mais ça reste assez bizarre de ne pas pouvoir accéder à un component pourtant bien présent.

[JulienFio]

Ben justement, tu ne sais pas s'il existe ou pas dans ton cas. Du coup avant de faire un Add il te faut vérifier qu'il existe

[sekaijin]

voilà pourquoi je n'utilse jamais les recherche

lorsque je créé un objet et que je risque d'en avoir besoin
j'en garde une référence.
du coup ensuite j'utilise la référence.

par exemple dans mon tree pannel lorsque je clique dessus une entrée je regarde si la référence dan sle noeud est à null si elle est à null je créé le panel et place la référence dans le noeud.
je place aussi la référence du neud dans le pannel

si je reclique sur le noeud je sais que le pannel existe car la référence est valorisée.

lorsque je ferme le pannel j'utilise la référence au noeud pour mettre à null sa référence au panel

jamais je n'ai besoin de getCmp ou getElement

A+JYT