Un menu TreePanel Simple
Un TreePanel est un panel permettant de gérer un menu ou arbre vertical.
Cet arbre possède des noeuds. Chaque noeud peut en contenir d'autre et ce de manière récursive.
Un TreePanel doit contenir un noeud Root (parent) qui contiendra tout les autres.
Il est possible de créer un menu qui se charge petit à petit, de manière dynamique dès que l'on ouvre un noeud. Ceci est possible grâce a deux objets spécifiques :
- Ext.tree.AsyncTreeNode
- Ext.tree.TreeLoader
Commençons par un exemple simple :
Chargement Manuel :
Ext.onReady(function(){
var monTreePanel = new Ext.tree.TreePanel({
renderTo:Ext.getBody(),
root: new Ext.tree.AsyncTreeNode({
text: 'Racine',
children: [{
text: 'Menu Option 1',
leaf: true //pas de sous noeud
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
})
})
monTreePanel.show();
});
Résultat : 
Explications :
1) Dès que la pages prête (tous les scripts sont chargés)
Ext.onReady(function(){
2) Création de l'objet monTreePanel qui instancie la classe Ext.tree.TreePanel
var monTreePanel = new Ext.tree.TreePanel({
3) Le panel s'affichera directement dans le corps (body) de la page
renderTo:Ext.getBody(),
4) Création du noeud Parent avec le libellé 'Racine' qui instancie la classe Ext.tree.AsyncTreeNode
root: new Ext.tree.AsyncTreeNode({
text: 'Racine',
5) Affectation des enfants (sous noeuds) au noeud Racine
children: [{
text: 'Menu Option 1',
leaf: true //pas de sous noeud
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
6) Affichage de l'arbre.
monTreePanel.show();
Le plus souvent, notre menu serra chargé dynamiquement. Pour notre exemple nous utiliserons une page php qui retourne un json :
Chargement Dynamique :
Page treePanel.js :
Ext.onReady(function(){
var monTreePanel = new Ext.tree.TreePanel({
renderTo:Ext.getBody(),
loader:new Ext.tree.TreeLoader({
dataUrl : 'http://127.0.0.1/ext3/tree.php'
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Racine'
})
})
monTreePanel.show();
});
Explications :
L'object loader qui instancie Ext.tree.TreeLoader permet d'apeller une page php en ajax. la propiété dataUrl,spécifie quelle page on veut charger.
Page tree.php :
<?php
$arrData = array(
array(
'text' => 'Menu Option 1',
'leaf' => true
),
array(
'text' => 'Menu Option 2',
'leaf' => true
),
array(
'text' => 'Menu Option 3',
'leaf' => true
)
);
echo json_encode($arrData);
?>
Page treePanel.html :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link href="http://127.0.0.1/ext3/ExtJs3/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/ext-all-debug-w-comments.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/src/locale/ext-lang-fr.js"></script>
<script type="text/javascript" src="http://127.0.0.1/ext3/treePanel.js"></script>
</head>
<body>
</body>
</html>
Résultat :