Foro

[Solucionado] tree con listeners cargados desde el server

0
hola, estoy tratando de realizar lo siguiente (ignoro si realmente se puede hacer) tengo un treepanel que se carga en la region oeste de un viewport, este tree carga sus elementos y subelementos desde un archivo php sin problemas (aparentemente) pero quiero que cuando se haga clic en uno de sus sublementos se abra una ventana, una grilla o lo que yo haya programado. mi codigo mas o menos es asi: este es el codigo contenido en mi html principal 
//La barra de tabs, del cuerpo
var tabs = new Ext.TabPanel({
            region:'center',
	        margins:'35 5 5 0',
    	    cmargins:'35 5 5 5',
            deferredRender:false,
            activeTab:0,
            autoDestroy:true,
            enableTabScroll:true,
            items:[{
            	id:'tabInicio',
                contentEl:'center1',
                title: 'Inicio',
                closable:false,
                autoScroll:true
            }]
});
//Arbol para el menu
var menuIzq=new Ext.tree.TreePanel({
	id:'im-tree',
	title: 'Menu',
	//loader: new Ext.tree.TreeLoader({
		
		dataUrl:'php/leer_menu.php',
	
	//}),
	rootVisible:false,
	lines:true,
	autoScroll:true,
	//iconCls:'nav',
	root: new Ext.tree.AsyncTreeNode({
	    text:'modulos'  
	    
	})
});
Ext.onReady(function(){
	viewport = new Ext.Viewport({
		layout:'border',
		items:[{
			region:'west',
			id:'west-panel',
			title:'Menu',
			split:true,
			width: 200,
			minSize: 175,
			maxSize: 400,
			collapsible: true,
			margins:'35 0 5 5',
			cmargins:'35 5 5 5',
			layout:'accordion',
			layoutConfig:{
				
				animate:true
				
			},
			items: [
				
				menuIzq
				
			]
     },tabs]
	
	});
	//Para mostrar los avisos de validación
	Ext.QuickTips.init();
});
function mostrarTab(nombre, titulo){
if(titulo==null)
  	titulo=nombre;
  	//Variable para saber si el tab esta abierto
  	var open = !tabs.getItem(nombre);
	if(open){
            tab = new Ext.Panel({
				contentEl:nombre,
		    	id: nombre,
		        title: 'Listado '+titulo,
		        autoScroll:true,
		        iconCls: 'tabs',
		        closable:true,
                autoScroll:true,
                autoLoad: {url: +'js/'+nombre+'.js', scripts: true, scope: this}
            });
            tabs.add(tab);
			tab.show();
			return;
		}
		//tabs.add(tab);
		tab = tabs.getItem(nombre);
		tab.show();
		return;
  	}
mi archivo leer_menu.php es el sgte: 
<?php
include ('conexion.php');
$modulo=3; //actualmente cargo el modulo manualmente pero despues debe ser leido desde una variable de sesion
$menu = $_POST['node'];
$arr = array();
if (!is_numeric($menu)){
	$consultaSQL = "SELECT me.text, me.id, cls FROM menus me, modulos mo WHERE  me.id_modulo=mo.id_modulo AND mo.id_modulo=$modulo";
} else {
	$consultaSQL = "SELECT sm.text, sm.id, sm.leaf, sm.listeners
	FROM submenus sm, menus me WHERE sm.id_menu=me.id AND me.id=".$menu;
}
$menus = mysql_query($consultaSQL) or die("Error:" . mysql_error());
	while($obj = mysql_fetch_object($menus)){
		$arr[] = $obj;
	}
Echo json_encode($arr);
?>
adicionalmente tengo 2 tablas, una con los menus y otra con los submenus, en la de submenu agregue un campo listeners que deberia poder activarme la funcion mostrarTab. la verdad es quee no se si se puede hacer o no. tomé la idea desde esta pagina. [url]http://passer.es/tdbg/[/url] usuario:test pass:test que dejó un usuario en el sitio de Ext js en español, descargue su codigo pero esta en jsp, imagino que es java, pero yo trabajo en php asi que lo estoy analizando de a poco a ver que aprendo. otro detalle que tengo es que no puedo volver a colapsar los menus, y no se me abren bien si no empiezo por el ultimo menu y voy subiendo de uno en uno. ¿le ha pasado eso a alguien mas?

4 Respuestas

Mejores votos Por fecha Solución
0
tambien he tratado otra manera: creando un listener para todos los nodos y dependiendo del id realizar una accion en particular pèro no he podido implementarlo de esta manera: 
menuIzq.on('click', treePanelOnClick);
var treePanelOnClick = function(node){
var id = node.attributes.id;
 switch(id){
  case "1":
   alert("it's foo!");
  break;
  case "2":
   alert("it's bar!")
  break;
 } 
}
0
trata cambiando 
var id = node.attributes.id;
por 
var id = node.id;
Salu2
0
mira, no me funcionaba con el evento on, pero logré ahcerlo con : menuIzq.addListener('click', function(nodo, e){ mostrarTab(nodo,nodo.text); }); ahora estoy tratando de que me levante una ventana al hacerle click <!-- s:) --><!-- s:) -->
0
ahora pude resolvert el problema que tenia con el tree con respecto a que no se cerraban bien si no empezaba de abajo hacia arriba y que cuando clikeaba en uno se me abria otro nodo. era porque los nodos hijos tenian el mismo id de los nodos padre, como los cargaba desde la bd usando el indice autonumerico de la tabla menu para los menus y el indice autonumerico de la tabla submenus para los subelementos terminaba teniendo 2 id 1, 2 id 2, y asi. lo solucioné asignando un nuevo campo a la tabla submenu llamado id, cambiando el nombre del anterior id a id_interno. les asigne ademas numeros desde el 100 en adelante entonces con eso pude solucionar otro problema que tenia que al hacer clic en los menus no ejecutara nada sino solamente cuando hiciera clic en los elementos. habia probado de muchas manera pero de esta fue la unica que me resulto, porque en el listener pregunto si el nodo.id es mayor a 99 y recien llamo a la funcion. el problema que estoy tratando de solucionar ahora es que me cargue la ventana adecuada pero me carga el codigo el panel como si fuera texto. seguire trabajando en ello <!-- s:) --><!-- s:) --> editado: coloco aqui como lo resolvi por si a alguien le sirve de alguna manera: 
//la seleccion del nodo del arbol menu
menuIzq.addListener('dblclick', function(nodo, e){  
	if(nodo.id>99){ //como asigno los id de los nodos desde la BD lcon un numero 100 en adelante, veo si lo seleccionado es un nodo hijo o uno padre
		
	var contenido = Ext.getCmp('contenido');//capturo el elemento centro del viewport al cual le di el id 'contenido'
	var titulo = nodo.text;//asignamos el titulo al tabs segun el nodo que elija el usuario
	var id_tab= nodo.id;//asignamos el id del tab con el id del nodo 
	var open = !contenido.getItem(id_tab);//creamos una bandera que me dira si el tab ya existe o no
		
	if (open){
			
		tab = new Ext.Panel({
					
			title:titulo,
			id:id_tab,
			iconCls:nodo.attributes.icono,//aqui asigno el icono del tab (*)
			closable:true,
			autoScroll:true,
			items:[{xtype:nodo.attributes.modulo}]//aqui cargo el elemento creado anteriormente (**)
		});
				
		contenido.add(tab);//agrego el tab
		tab.show();//muestro el tab
		}
				
	tab = contenido.getItem(id_tab);//en caso de que el tab ya haya sido creado 
	tab.show();//lo muestro
	}
});
(*) originalmente queria usar la propiedad 'cls' del nodo cargado tambien desde la bd pero me da un error en el arbol cuando le asigno el icono desde la base de datos, me muestra el icono repetidas veces distorcionadno la imagen del arbol. (**) estos modulos deben ser agregados al archivo html previamente de esta manera: <script type="text/javascript" src="js/formdatos.js"></script> bueno espero que a alguien le sirva <!-- s:roll: --><!-- s:roll: --> talvez me compliqué mucho pero es como se me ocurrió resolverlo, y como decia Thomas Alva Edison cuando no encontraba la respuesta que buscaba "ahora conozco una forma más de como no se hace"

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.

Tags

Ext JS 3