Lo que hacemos aquí es básicamente llamar a la hoja de estilos así como los scripts necesarios
para que pueda funcionar Ext JS, ahora ejecutemos el siguiente SQL en nuestro gestor de
base de datos preferido.
INSERT INTO `arbol` (`id`, `parent_id`, `nombre`) VALUES
(1, NULL, 'Frameworks'),
(2, 1, 'Ruby on Rails'),
(3, 1, 'Django'),
(4, 1, 'Symfony'),
(5, 1, 'CakePHP');
Con esto hemos creado un Padre que es Frameworks y varios hijos, ahora modifiquemos el
archivo
index.php
Ext.BLANK_IMAGE_URL = 'ext-2.2/resources/images/default/s.gif';
Ext.onReady(function() {
//Crear un nodo que cargue asicronicamente (AJAX) sus hijos
root = new Ext.tree.AsyncTreeNode({
text: 'Raiz',
id:'0',
draggable: false
});
//Crear Arbol
var tree = new Ext.tree.TreePanel({
id: 'treePanel',
loader: new Ext.tree.TreeLoader({
url:'arbol.php',
requestMethod:'GET',
baseParams:{accion:'mostrar'}
}),
width: 250,
height: 300,
enableDD: true, //Permite Drag and Drop
containerScroll: true,
renderTo: 'arbol', //Id del tag en el cual se renderiza
root: root,
rootVisible: false, //No queremos ver el nodo raiz
/*tbar : [{
text: "Crear", handler: createNode},
{text: "Borrar", handler: deleteNode
}],*/