Foro

[Solucionado] cargar elementos en centro de un viewport

0
Buenas, aqui estoy otra vez preguntando <!-- s:) --><!-- s:) -->. estoy con un proyecto, avanzando poco a poco. cada cierto rato comienzo de cero porque en la medida que voy aprendiendo me doy cuenta de mejores formas de hacer algunas cosas, pero como siempre en estos procesos de aprendizaje se topa uno con nuevos problemas que cuesta resolver al principio pero que despues de avanzado en conocimientos se ven muy simples. me ha ayudado mucho el encontrar un foro como este, sobretodo en español, porque aunque tengo algun dominio del ingles algunas cosas se me escapan. ademas tengo 2 libros de extjs que encontré por ahi <!-- s:roll: --><!-- s:roll: --> (y no fue facil, hasta chino tuve que aprender para meterme en cierto forillo por ahi <!-- s:twisted: --><!-- s:twisted: --> ) resumiendo. mi aplicacion consta de un viewport con un treepanel en su region oeste, este tree se carga con un menu desde una base de datos segun el usuario que haya ingresado. y cuando el usuario selecciona un nodo debe cargar una pagina en la region centro del vieport. so far so good, como dicen en gringolandia. el problema es que los elementos cargados en la region centro deben ser codigos con mas elementos exts, como grillas, gormularios, ect. logro cargar las paginas con el siguiente metodo:
	menuIzq.addListener('dblclick', function(nodo, e){  
		if(nodo.id>99){
		
			var contenido = Ext.getCmp('contenido');
			var titulo = nodo.text;//asignamos el titulo al tabs segun el nodo que elija el usuario
			var archivo = nodo.id;//asignamos el id del tab con el id del nodo y que es el nombre del archivo que llamaremos
			var open = !contenido.getItem(archivo);//creamos una bandera que me dira si el tab ya existe o no
			
			if (open){
			
				tab = new Ext.Panel({
				
					title:titulo,
					id:archivo,
					iconCls:'m'+archivo,
					closable:true,
					autoScroll:true,
					autoLoad:{url: 'js/'+archivo+'.js', scripts: true, scope: this} 
					
				});
				
				contenido.add(tab);
				tab.show();
				return;
			}
			
			tab = contenido.getItem(archivo);
			tab.show();
			
			
		}
	
	}); 
si en el archivo a llamar coloco un alert simple, algo asi como:
<script>
alert('esto');
</script>
funciona a las mil maravillas, pero no he podido cargar ningun elemento dentro tipo formulario o grilla. mi codigo para el viewport es el siguiente:
var viewport = new Ext.Viewport({
		
		layout:'border',
		renderTo: document.body,
		items: [{
		
				region:'north',
				xtype: 'toolbar',
				height:30,
				items:[{
					xtype:'tbbutton',
					iconCls:'usuario',
					text:'Usuario: <b>Pedro Constanzo</b>'
					
				},'->',{
					xtype:'tbsplit',
					iconCls:'salir',
					text:'Salir',
					menu:[{
						
						iconCls:'salir',
						text:'Salir'
					},{
						iconCls:'cambiar_usuario',
						text:'Cambiar Usuario'
					
					
					}]
					
					
				
				}] 
				
			},{
			
			region:'west',
			
			xtype:'panel',
			split:true,
			collapsible:true,
			collapseMode:'mini',
			title:'Modulos',
			width:200,
			minSize:200,
			maxSize:200,
			items:[menuIzq]
		},{
		
			region:'center',
			id:'contenido',
			xtype:'tabpanel',
			activeTab:0,
			enableTabScroll:true,
			items:[{
				title:'Inicio',
				html:'centro'
			}]
		
		},{
			
			region:'east',
			xtype:'panel',
			split:true,
			width:200,
			html:'este'
			
		}]
	});
haber si alguien me echa una manito <!-- s:?: --><!-- s:?: --> pd: si alguien quiere dichos libros, y siempre que eso no infrinja las reglas del foro, que me mande PM <!-- s;) --><!-- s;) -->
0
Hola, te comento lo siguiente: el atributo de configuracion "autLoad" de tu Panel, hace peticiones asíncronas, si pones por ejemplo una url del servidor como un .php este te va a devolver todo el codigo HTML generado por el php como string y ya extjs mediante su lógica interna lo vuelve a generar el DOM, lo que aveces te puede causar problemas. Lo que puedes hacer también es crear un iframe y colocarlo dentro de tu panel, yy ya este iframe hace el llamado a tu html que contiene la grilla. En este blog de un amigo <!-- m -->http://jonathanlarav.blogspot.com/<!-- m -->, encontrarás un ejemplo de TreePanel en un Viewport que hace justamente lo que te comento. Espero te sirva. sldos.
0
gracias por tu respuesta. sabes? lo solucioné al final de la sgte manera: en la db de datos, en la tabla desde donde cargo los items del arbol, agregue un campo llamado 'modulo' con el nombre del componente que cree previamente, por ejemplo 'formDatos', y luego en el listener del doble clic del nodo agregue la sgte linea: [b]items:[{xtype:nodo.attributes.modulo}][/b] como parte del tab nuevo que creo, y hasta ahi todo bien. me carga perfecto, el unico problema que tengo ahora es que no me funcionan el boton de agregar pero si el de eliminar y refrescar, tengo que revisar mi codigo.(*) gracias por tomarte el tiempo de responder! <!-- s:D --><!-- s:D --> <!-- s:D --><!-- s:D --> despues de revisar mi codigo me di cuenta que si funcionaba el boton, lo que pasaba es que el componente se cargaba mostrandome solo parte del listado de la grilla, lo soucioné agregandole layout:'fit' al crear el tab correspondiente <!-- s:lol: --><!-- s:lol: --> <!-- s:lol: --><!-- s:lol: --> <!-- s:lol: --><!-- s:lol: --> <!-- s:lol: --><!-- s:lol: --> <!-- s:lol: --><!-- s:lol: -->
0
que tal, muy buena idea, pero ante eso me surge una pregunta, ¿entonces entiendo que todo los fuentes de todos tus modulos son traidos en la primera carga de la página?, lo entiendo así porque me comentas que al darle dblclick a un nodo del arbol, abres el modulo (con tus grilla, form, etc), me corriges si estoy equivocado. Te cuento algo, en mi trabajo hemos desarrollado un sistema con mas de 125 items(modulos) en el arbol, sin exagerar. Y optamos por hacerlo como te comentaba en mi respuesta anterior, para no estar trayendo todos los fuentes de los 125 módulos. Es más la versión inicial era utilizando un desktop y no con arboles, te imaginarás como hacíamos sufrir al browser. Bueno, te comparto esta experiencia. sldos.
0
tienes toda la razon, en total el sistema tendrá unos 60 modulos, que no es menor,( aunque no todos los modulos son para todos los usuarios) estaba buscando la forma de llamar no solo al xtype sino de incluir en el proceso al modulo, pero creo que es mas sencillo tu consejo, no he estudiado aun el tema de los iframe. gracias por el consejo <!-- s:) --><!-- s:) -->
0
al final implementé el sistema con iframes y me resulta ahora mucho mejor, mi codigo al final quedo asi:
//mi componente iframe
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});
	}		
});
//la seleccion del nodo del arbol menu
menuIzq.addListener('dblclick', function(nodo, e){  
	if(nodo.id>99){
                      var contenido = Ext.getCmp('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({
				layout:'fit',
				title:titulo,
				id:id_tab,
				iconCls:nodo.attributes.iconCls,
				closable:true,
				autoScroll:true,
				items:[
					new Ext.ux.IFrameComponent({
					id: nodo.id,
					url:nodo.attributes.modulo,//aqui cargamos la url de la pagina con el componente
					name: nodo.id
				})]
			});
			contenido.add(tab);
			tab.show();
			return;
		}
		tab = contenido.getItem(id_tab);
		tab.show();
	}
});
me resulto perfecto, gracias por el consejo [b]mayerhorna[/b]

¿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.