TreePanel con ExtJS

En este pequeño articulo vamos a iniciar creando un menú que abra las páginas que le indicamos, para esto vamos a necesitar la liberia del ExtJS y principalmente la clase Ext.tree.TreePanel, en mi caso lo he hecho con la versión 3.0 que a la fecha de este post se encuentra en RC 2.

ExtJS: http://extjs.com/products/extjs/download.php

Importamos las librerias de ext y luego los archivos:

pricipal.css

/**   CSS para pantalla principal  **/



html, body {



    font: normal 12px verdana;



    margin: 0;



    padding: 0;



    border: 0 none;



    overflow: hidden;



    height: 100%;



}



.p {



    margin:5px;



}



.msg .x-box-mc {



    font-size:13px;



}



#msg-div {



    position:absolute;



    left:35%;



    top:10px;



    width:310px;



    z-index:30000;



}.x-grid3-row-body p {



    margin:5px 5px 10px 5px !important;



}.settings {



    background-image:url(../images/png/folder_wrench.png);



}.nav {



    background-image:url(../images/png/folder_go.png);



}#north {



    background: #7F99BE url(../images/gif/layout-browser-hd-bg.gif) repeat-x center;



}







#center1 {



    background-image:url(../images/jpeg/desktop.jpg);



}



#north h1 {



    font-size: 16px;



    color: #fff;



    font-weight: normal;



    padding: 5px 10px;



}







.principal_tabhome{



    background-image:url(../images/png/principal_home.png) !important;

customTreePanel.js

Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.namespace('Ext.org.demo');
     
     //Clase para creacion de los tabs en la parte derecha
     Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
       onRender : function(ct, position){
        this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, src: this.url});
       }
  });
     
     //Panel Superior
     Ext.org.demo.PrincipalHeader = function(config) {
      var tree = config.tree;
      var myRef = this;
      this.txtFindObject = new Ext.form.TextField({
    width: 200,
    emptyText:'Buscar',
    listeners:{
     render: function(f){
      f.el.on('keydown', 
       function (e){
        tree.filterTree(e);
       }
       , f, {buffer: 350});
     }
    }
   });
   
   this.btnExpandAll = new Ext.Toolbar.Button({
    iconCls: 'icon-expand-all',
    tooltip: 'Expandir Todo',
                handler: function(){ 
                 tree.root.expand(true);
                }
   });
   
      this.btnCollapseAll = new Ext.Toolbar.Button({
                iconCls: 'icon-collapse-all',
                tooltip: 'Colapsar Todo',
                handler: function(){ 
                 tree.root.collapse(true); 
                }
      })
      
      this.toolBar = new Ext.Toolbar({
       cls:'top-toolbar',  
       items:[ ' '
         ,this.txtFindObject
         ,' '
         ,' '
         ,this.btnExpandAll
         ,'-'
         ,this.btnCollapseAll
       ]
      });
      
   config.items = [{
              xtype:'box',
              el:'north',
              border:false,
              anchor: 'none -25'
          }
          ,this.toolBar
      ]; 
      
   Ext.org.demo.PrincipalHeader.superclass.constructor.call(this, config); 
  }
  
  Ext.extend(Ext.org.demo.PrincipalHeader, Ext.Panel, {  
    layout:'anchor',
          initComponent: function(){
           Ext.org.demo.PrincipalHeader.superclass.initComponent.apply(this);
    }
  });
     
     
     
  //Tree
     Ext.org.demo.PrincipalTree = function(config) {
      
      var filter = new Ext.tree.TreeFilter(this, {
    clearBlank: true,
    autoClear: true
   });
      var hiddenPkgs = [];
      
   this.filterTree = function filterTree(e){
    
       var text = e.target.value;
    Ext.each(hiddenPkgs, function(n){
     n.ui.show();
    });
    if(!text){
     filter.clear();
     return;
    }
    this.expandAll();
    
    var re = new RegExp( Ext.escapeRe(text), 'i');
    filter.filterBy(function(n){
     return !n.attributes.leaf || re.test(n.text);
    });
    
    hiddenPkgs = [];
    this.root.cascade(function(n){
     if(!n.attributes.leaf && n.ui.ctNode.offsetHeight < 3){
      n.ui.hide();
      hiddenPkgs.push(n);
     }
    }); 
      }         
   Ext.org.demo.PrincipalTree.superclass.constructor.call(this, config); 
  }
  
  Ext.extend(Ext.org.demo.PrincipalTree, Ext.tree.TreePanel, {
   //enableDD: true,    
   minSize: 175,
      maxSize: 300,
      width: 200,
         initComponent: function(){
          Ext.org.demo.PrincipalTree.superclass.initComponent.apply(this);
   }
  });
     
  //Vista Principal, agrupa al panel superior, izquierdo, centro 
     Ext.org.demo.PrincipalView = function(config) {
   this.north = config.north;
   this.west = config.west;
   this.center = config.center;
   
   config.items = [
       this.north
          ,this.west
          ,this.center 
      ];
   
   //Funcion para añadir un tab
   this.addTab = function addTab(e) {
    var tabs = this.center;
    
    var open = !tabs.getItem(e.id);
       if (open){
     var newPanel = new Ext.Panel({
      id : e.id,
      title: e.text,
      loadScripts: true,
      autoScroll: true,
      closable: true, 
      iconCls:e.id,
      //style: "background:url("+e.attributes.icon+")!important",
      //icon : e.attributes.icon,
      layout:'fit',
      items: [ new Ext.ux.IFrameComponent({ 
       id: e.id
       , url: e.attributes.url
       , name: e.id
      }) ]
     });
     tabs.add(newPanel);
     tabs.setActiveTab(newPanel);
      }
    else {
     tabs.setActiveTab(e.id);
    }
   }
   
   //Para controlar el load de los items
   this.west.on('click', function(node, e){
           if(node.isLeaf()){
              e.stopEvent();
              this.addTab(node);
           }
      },this);
   
   
   Ext.org.demo.PrincipalView.superclass.constructor.call(this, config); 
  };
    
  Ext.extend(Ext.org.demo.PrincipalView, Ext.Viewport, {  
          layout:'border'
  });
     
  
  Ext.onReady(function(){
   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
   
   //LADO IZQUIERDO: Arbol 
   var tree = new Ext.org.demo.PrincipalTree({
       rootVisible:false,
       lines: true,
       region:'west',
       split: true,
       autoScroll: true,
       title:'Menu de Opciones',  
       iconCls:'principal_mainmenu',
       singleExpand: false,
       collapsible: true,
       layoutConfig:{
                      animate:true
                  },
       loader: new Ext.tree.TreeLoader({}),
       root: new Ext.tree.AsyncTreeNode(
        {
     'children':
      [
       {
       'text':'Base',
       'children':
        [
         {
          'id':'Ordenes_de_Pedido',
          'icon':'urlDelIcono.png',
          'text':'Ordenes de Pedido',
          'leaf':true,
          'url': 'urlDeLaPagina.html'
         },{
          'id':'Mantenimiento de Empleados',
          'icon':'urlDelIcono.png',
          'text':'Mantenimiento de Empleados',
          'leaf':true
         },{
          'id':'Empresa_de_Servicio',
          'icon':'urlDelIcono.png',
          'text':'Empresas de Servicio',
          'leaf':true
         }
        ]
       },
       {
       'text':'Segundo Modulo',
       'children':
        [
         {
          'id':'Empresa2',
          'icon':'urlDelIcono.png',
          'text':'Empresa 2',
          'leaf':true
         },{
          'id':'ModuloDePruebas1',
          'icon':'urlDelIcono.png',
          'text':'Modulo de Pruebas 1',
          'leaf':true
         },{
          'id':'ModuloDePruebas2',
          'icon':'urlDelIcono.png',
          'text':'Modulo de Pruebas 2',
          'leaf':true
         }
        ]
       }
      ],
     'expanded':true
    }
    )
   });   
   
   //PARTE SUPERIOR: Para las busquedas de objetos en el menu 
   var hd = new Ext.org.demo.PrincipalHeader({
          border: false,          
          region:'north',
          cls: 'docs-header',
          height:60,
          tree : tree
      });
     
   //Tab Panel (Parte derecha) 
   var tabs = new Ext.TabPanel({
       region:'center',
       deferredRender:false,
       activeTab:0,
       items:[{
         contentEl:'center1',
         title: 'Home',
         iconCls: 'principal_tabhome',
         html : 'Aqui se puede linkear a una imagen o ingresar cualquier fragmento de html',
         //autoLoad: 'http://www.google.com.pe/',
         autoScroll:true
       }]
   });
     
   var principalView = new Ext.org.demo.PrincipalView({
    north:hd
    ,west:tree
    ,center:tabs 
   });  
  });

Esta claro que hay partes de este código que deben generarse dinámicamente como el bloque que va dentro de: "Ext.tree.AsyncTreeNode", esto podría de acuerdo a los roles y permisos que tenga el usuario logeado, tambien se puede dividir el codigo en varios *.js, pero esto hubiera hecho aún mas largo este post. :S

un ejemplo de como se vería.