directorios web


Inicio
Cursos
Foro
Contacto
Entrar
Registrarse
Aprendiendo Ext JS 3
Ordenar los nodos de un TreePanel Más videos
Comentarios: 11 Likes: 0 Persona Duración: 0.0 minutos Dificultad: Intermedio
Descripción del tema
En el tutorial de hoy veremos cómo podemos ordenar los elementos del TreePanel y además los guardaremos en una base de datos MySQL, este es el primer tutorial dondemostraré un poco más allá del uso de ExtJS y hablare de cómo generar el árbol a partir de una tabla en la base de datos. Supongamos que tenemos una tienda en línea, los productos que se venderán estarán categorizados para que el usuario final pueda navegar fácilmente por la tienda, una categoría puede estar contenida dentro de otra categoría principal, por ejemplo podríamos tener la categoría “Música” ytener alguna subcategoría como “Rock”, el número de niveles será definido por el administrador de la tienda, así que no pondremos límite de niveles.
La demostración
El día de hoy solamente veremos cómo podemos ordenar las categorías existentes, en el siguiente tutorial prometo mostrar cómo podemos agregar o eliminar categorías. Te recomiendo visitar el ejemplo que he preparado.

Ejemplo deltutorial
Material de apoyo
Antes de continuar descarguemos el material de apoyo para este tutorial. Lo descomprimimos y copiamos los archivos a nuestro servidor Web que instalamos al inicio del curso, esto es necesario porque usaremos Ajax, si es necesario cambia las rutas a la librería ExtJS dentro del archivo “tree-order.html”.
Creación de la base de datos
Lo primero que haremos será crearla tabla que usaremos para almacenar las categorías, vamos a crear una tabla que se llame “categories” y que contenga los campos “id, id_parent, category, order_number y description”.

Descripción de la tabla "categories"
Para los que solo les gusta copiar/pegar aquí les dejo el SQL necesario para hacer lo que describí anteriormente.
CREATE TABLE categories (
id INT NOT NULLAUTO_INCREMENT PRIMARY KEY ,
id_parent INT NULL ,
category VARCHAR( 255 ) NOT NULL ,
order_number INT NULL,
description TEXT NOT NULL
) ENGINE = INNODB;
Ahora vamos a crear algunas categorías para que podemos probar el funcionamiento del tutorial, aquí dejo unos cuantos “inserts” a la tabla “categories”:
INSERT INTO categories (id, id_parent, category, description)
VALUES (NULL, NULL, 'Music','The music category'),
(NULL, NULL, 'Movies', 'All about movies and stuff'),
(NULL, NULL, 'Games', 'Are you a gamer?'),
(NULL, 1, 'Classic', 'For those who love a quiet moment'),
(NULL, 1, 'Rock', 'Let\'s rock and roll!'),
(NULL, 1, 'Pop', 'Do you like pop music?'),
(NULL, 2, 'Action', 'Actions movies for everyone'),
(NULL, 2, 'Romantic', 'Watch this with yourgirlfriend'),
(NULL, 3, 'Sports', 'Want to play a game?'),
(NULL, 3, 'First person shooter', 'Let\'s kill some fools'),
(NULL, 3, 'Racing', 'For those who like to drive!'),
(NULL, 9, 'Soccer', 'All about foot ball soccer'),
(NULL, 9, 'Hockey', 'Ready for the ice?');
Aquí lo único interesante es el campo “id_parent”, este campo tendrá el “id” de la categoría “padre”, de esta manera podremosconstruir una estructura de árbol con “n” cantidad de niveles, los otros campos creo que son muy descriptivos por lo tanto no hablaré de ellos.

Información de prueba
Creación de la estructura de árbol
El siguiente paso es crear una estructura de árbol con los registros que tenemos en nuestra base de datos, he creado una clase en PHP que nos hará la vida mucho más sencilla.
/**
* Thisclass creates a Tree structure of information for the TreePanel component
* of the ExtJS library.
*
* @author Crysfel Villa
* @date 12/18/2009
*
*/
class TreeExtJS{
private $tree = array();
private $index = array();
private $cont = 0;

/**
* This method inserts a node to the Tree, the child param may contain an
* "id" property that will be use as a "key", if the...