Comme promis dans l’article Hello World, on va commencer à aborder les choses sérieuses. Dans cet article on va dessiner un arbre avec des données statiques en format JSON. On va tout d’abord, initialiser une page “extjs enabled” en ajoutant les références vers les fichiers js qu’il faut bien (voir cet article)
L’arbre contiendra les données hiérarchisées des modes de transports comme ceci :
La racine sera « Modes de transport » qui contiendra 2 nœuds enfants : « Transport en commun » et « Transport privatif ». le Transport en commun contiendra les nœuds enfants suivants : « Train », « Métro »,et « Bus »… Et ainsi de suite. Voici les données en format JSON :
var moyensDeTransport = [{ "text": "Transport en commun", "id": "11", "leaf": false, "cls": "folder", "children": [
{ id: "111", text: "Train", "leaf": false, "cls": "file", "children": [
{ id: "1111", text: "TGV", "leaf": true, "cls": "file", "children": [] },
{ id: "1112", text: "Corail", "leaf": true, "cls": "file", "children": [] },
{ id: "1113", text: "TER", "leaf": true, "cls": "file", "children": [] }
]
},
{ id: "112", text: "Métro", "leaf": true, "cls": "file", "children": [] },
{ id: "113", text: "Bus", "leaf": true, "cls": "file", "children": [] }
]},
{ "text": "Transport privatif", "id": "12", "leaf": false, "cls": "folder", "children": [
{ id: "11", text: "Voiture", "leaf": true, "cls": "file", "children": [] },
{ id: "21", text: "Taxi", "leaf": true, "cls": "file", "children": [] }
]}
];
L’objet arbre du framework extjs est le Ext.Tree.TreePanel. On peut l’instancier d’une manière très simple : var arbre = new Ext.Tree.TreePanel() ; Sauf que de cette façon on a juste instancier un objet en mémoire de type TreePanel mais nous ce qu’on veut c’est l’afficher dans notre page, il faut donc configurer l’objet, pour cela on a deux manières de faire :
- En utilisant les Config Options du constructeur (la méthode la plus couramment utilisée)
- En utilisant les méthodes publiques de l’objet après l’avoir instancié
Dans cet article on va utiliser les Configs Options. Pour ce faire, il faut tout simplement passer en paramètre au constructeur un objet JSON contenant toutes les configs options qu’on veut remplir comme ceci :
var arbreMoyensDeTransport = new Ext.tree.TreePanel({
el: 'container', //l’id de l’élément html qui va contenir l’arbre (div)
animate: true, //animer l’arbre lors des expand / collapse
enableDD: false, //Désactiver le Drag and drop
loader: treeloader, //Le composant qui va charger l’arbre// Note: no dataurl, register a TreeLoader to make use of createNode()
autoHeight: true, //la hauteur du conteneur de l'arbre s’adapte à la hauteur de l’arbre
selModel: new Ext.tree.DefaultSelectionModel(), //Par défaut c’est le singleSelectionModel, définit la politique de sélection dans l’arbre
rootVisible: true //La racine est visible
});
Pour l’instant on a créé une instance de l’arbre mais on ne l’a pas encore lié avec les données qu’il doit contenir. Pour cela on va tout d’abord instancier le type Ext.tree.AsyncTreeNode en passant à la config option ‘children’ l’objet JSON déclaré ci-dessus de la manière suivante :
// set the root node
var root = new Ext.tree.AsyncTreeNode({
text: 'Moyens de transport', //texte du noeud
draggable: false, // Désactiver le Drag and drop sur ce noeud
id: '1', // identifiant du noeud
children: moyensDeTransport //Objet JSON contenant la structure de l’arbre
});
Ensuite on va appeler la méthode publique ‘setRootNode’ de TreePanel permettant de définir le nœud racine de l’arbre :
arbreMoyensDeTransport.setRootNode(root);
Il ne reste plus qu’à afficher le résultat :
arbreMoyensDeTransport.render();
Voici le résultat :
On vient donc d’utiliser un objet de type Ext.tree.TreePanel qu’on a lié à des données statique au format JSON pour construire et afficher un arbre dans un page.
Conclusion :
Quelques remarques à noter après ce premier article :
- Extjs est un framework javascript objet (Comme dit au départ)
- Tous les constructeurs de n’importe quel type d’objet du framwork Extjs prennent en paramètre un objet JSON.
- Les contrôles Extjs sont bindabable à des données sous le format JSON