[Treeloader] Récursivité et personnalisation [Résolu]

[Siriru]

Bonjour,

j'ai un TreeLoader qui me permet de créer les nœuds d'un TreePanel à l'aide d'une requête Ajax (avec du JSON). Voici mon code :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
var agentsTreeRoot = new Ext.tree.AsyncTreeNode();
var agentsTreeLoader = new Ext.tree.TreeLoader({
  url: 'person/index',
});
 
var AgentsTreePanel = new Ext.tree.TreePanel({
  id: 'treepanel-agents',
  title: 'Agents',
  root: agentsTreeRoot,
  rootVisible: false,
  iconCls: 'menu-agents',
  loader: agentsTreeLoader
});

tel quel, le résultat me pose deux problèmes. Au lieu de me créer une seule fois les nœuds (j'affiche une liste de personne), j'ai le droit à un truc assez bizarre. Chaque nœud contient des fils (la même liste), qui contiennent des fils, etc. à l'infini. Je voudrais évidemment me limiter à un seul affichage.

De plus, je souhaiterai personnaliser les nœuds pour leur donner une icone personnalisé comme je peux faire dans un panel où j'ajoute mes nœuds individuellement (via la propriété iconCls)

[Siriru]

j'ai eu ma réponse tout seul au final, au prix de pas mal de recherches, alors qu'au final, c'est vraiment simple.

On surcharge la méthode createNode(). Et là on peut accéder à la config des nœuds créés dynamiquement. Leaf à true permet de ne pas avoir de fils. On accède aux propriétés d'un node normal et on peut tout faire donc.

Code :

1
2
3
4
5
6
7
8
9
var agentsTreeLoader = new Ext.tree.TreeLoader({
  url: 'person/index',
  createNode: function(attr){
    attr.iconCls = 'item-agents';
    attr.leaf = true;
    attr.text = attr.lastname+' '+attr.firstname;
    return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
  }
});

[JulienFio]

Oui c'est exact, et dis toi que c'est valable pour tous les composants Extjs. Tu peux leur attribuer des attributs de ton choix et y accéder de la même façon.

Code :

1
2
3
4
5
6
7
8
 
var mon panel = new Ext.Panel({
id: 'monId',
titre: 'monTitre',
monAttribut: 'Hello'
});
 
alert(panel.monAttribut) //Te retournera 'Hello'

[Siriru]

Mais alors si je veux ajouter un listerner on click à chaque node que je crée de cette manière, je dois faire comment ?

[JulienFio]

Il te suffit de définir l'évènement directement sur ton TreePanel

[Siriru]

si je peux me permettre, le "il suffit" je le trouve un poil exagéré. Ma solution du coup c'est ça, mais je la trouve loin d'être instinctive du coup :

Code :

1
2
3
4
5
MonPanel.initEvents = function() {
  this.on('click', function(n){
    .....
  }, this);
};

[JulienFio]

Ce qui reviens à faire ce que j'ai dit plus haut. Je ne vois pas en quoi ce n'était pas clair.

C'est tout ce qu'il y a de plus simple. Tu as ton composant Treepanel ? et il bien il te suffit de définir ton évènement onClick directement dessus..

Il te manquait peut-être ceci avec:

Code :

1
2
3
4
5
6
7
8
9
 
var monTreePanel = new Ext.tree.TreePanel({
    ...,
    listeners: {
        click: function(node, e ){
                 ....
         }
     }
});

[Siriru]

Erf, effectivement =/

Au temps pour moi.