RSS

TreePanel con ExtJS

lunes, 15 de junio de 2009

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.

19 comentarios:

Anónimo dijo...

Perdona la pregunta pero soy nuevo usando ExtJS...

¿Como invocaria el ejemplo que pusiste?

Gracias por la pronta respuesta

jonathanlarav dijo...

Hola, lo unico que debes hacer es poner el codigo en dos archivos diferentes pricipal.css y customTreePanel.js, luego en tu pagina principal los importas:

script type="text/javascript" src="customTreePanel.js"

link rel="stylesheet" type="text/css" href="pricipal.css"

Puedes enviarme un mail si deseas que te envíe el proyecto completo, saludos.

Slipknot dijo...

Hola jonathan, podrías enviarme elproyecto por correo, pues he intentado hacerlo una y mil veces y no me sale como debería.. te agradecería mucho la ayuda, de veras lo necesito...

Raúl Pacheco Ruiz dijo...

Bunas amigo jhonatan seria tan amable si podrias enviarme el proyecto, es que intente hacerlo pero no me queda igual, saludos

Unknown dijo...

Hola Raúl, dejame tu mail para enviarte el proyecto completo, saludos

Raúl Pacheco Ruiz dijo...

Hola Jonatahn mi correo es rcpruiz@gmail.com, enviame por favor el poryecto, y gracias por tu valiosa colaboracion

Unknown dijo...

hola jonathan muchas gracias por tu ejemplo, estoy algo perdido por que e invocado el mismo pero no se comporta como necesito ahora si tu podrias enviarme tu codigo si no es mucha molestia gracias de antemano

jean newman

Unknown dijo...

ahh mi correo es jdhades@gmail.com

Raúl Pacheco Ruiz dijo...

hola jonathan antes que nada gracias por enviarme el proyecto completo, aunque hay un problema esta hecho en java, y yo nunca he trabajado con eso, yo soy mas desktop, pero ahora estoy haciendo un proyecto en php utilizando extjs, asi que todavia no he podido verlo en accion, me imagino que debo instalar un servidor web para java o configurar algo, porque no he podido ver el proyecto que me enviaste

Alberto Arequipa M. dijo...

Hola Jonatha son nuevo en extjs y me encuentro un poco perdido quisiera que me pases el ejemplo que tenes:
estaria muy agradesido: este es mi correo albertoarequipa@gmail.com

duende dijo...

Hola, Jonathan, podrías enviarme el código completo si no es mucha molestia? Asimismo, sabes como podría hacer esto mismo pero con Ext 2.3? Mi mail es duendish@yahoo.com.ar. Desde ya muchas gracias!

Anónimo dijo...

hola Jonathan no he podido replicarlo, por favor me envías el proyecto completo. gracias, mi email es alexxx2680@hotmail.com

Anónimo dijo...

Saludos jonathan,
La verdad que magnifico proyecto, me lo podrias enviar a mi correo por favor, si no es molestia manuelml2049@hotmail.com

Anónimo dijo...

Que tal jonathan, me llamo mucho la atencion el proyecto, si me lo puedes enviar por correo te lo agradezco, gracias bladimirbalbin@gmail.com

Anónimo dijo...

hola jonathan

estoy muy interesado en su proyecto, el problema es que no me ejecuta bien, si no es molestia podias enviarme el proyecto completo ya que estoy realizando una implementacion contable y este me seria de gran ayuda para continuar con dicho proyecto.
muchas gracias por la colaboracion que me puedas brindar

jaime hernan corrales jaramillo
jcorralesjaramillo@gmail.com

Anónimo dijo...

Amigo, si no es much molestia, ¿Me podria enviar el ejemplo a mi correo? He intentado correrlo con las indicaciones que das, pero no me ha funcionado.

Este es mi correo: hry_mnho@hotmail.com

Anónimo dijo...

Hola Jonathan como estas? Por favor podrias enviarme tu proyecto, ya que estoy intentando hacerlo pero no me sale igual. El correo al que me lo puedes enviar es l.cruz.jalon@gmail.com

Estare muy agradecida.
Atentamente, Angie

Anónimo dijo...

Hola Jonathan
Apenas he empezado con extends y no se casi nada. he probado tu codigo y no me funciona. Crees poder mandarmelo por correo?

yosvani.fernandez@reduc.edu.cu

Unknown dijo...

Hola yosvani.fernandez@reduc.edu.cu,

He intentado enviar el proyecto a tu correo desde gmail, pero me llenan notificaciones de tu servidor de correos diciendo que el correo ha sido rechazado.

Si puedes mandame el correo de una direccion mas comun, saludos

Jonathan