Foro

Como crear una aplicacion grande con EXTJS?

Hola, quisiera que alguien por favor pudiera guiarme sobre que/cuales serian los topicos mas importantes para tener en cuenta para escribir una GRAN APLICACION con EXTJS. La palicacion estaria escrita con PHP (con un framework MVC), HTML y obviamente Javascript/EXTJS. Pero EXTJS [color=#FF0000]me parte parte la cabeza de pensar como separar los distintos componentes[/color] para que no quede todo escrito en un solo archivo .js Mi idea principalmente es esta: una pag principal index.php

 <html>
	<head>
        <title>BigApp con EXTJS</title>
		<meta http-equiv=content-type content="text/html; charset=utf-8">
		<link href="icons/favicon/favicon.ico" rel="shortcut icon">
	        <link rel="stylesheet" type="text/css" href="estilos/loading.css"></link>
    </head>
    <body scroll="no">
			<!-- mask loading -->
			<div id="loading-mask"></div>
			<div id="loading">...</div>
			<!-- end mask loading -->
			
			<!-- load -->
			<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
			<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
			<script type="text/javascript" src="ext/ext-all.js"></script>
			<script type="text/javascript" src="javascripts/override.js"></script>
<!-- Scripts EXTJS para todo lo relacionado con la creacion y manipulacion de lo que va dentro de los paneles -->
			<script type="text/javascript" src="javascripts/HeaderPanel.js"></script>
			<script type="text/javascript" src="javascripts/MainPanel.js"></script>
			<script type="text/javascript" src="javascripts/MainViewer.js"></script>
			<!-- end load -->
    </body>
</html>

el archivo EXTJS principal es: MainViewer.js aqui separo todo lo relacionado que haria el escritorio principal

Ext.ns('BigApp');
pdmexpert.MainViewer = {
	init : function(){
		Ext.QuickTips.init();
		
		var headerPanel = new BigApp.HeaderPanel();
		
		var mainPanel = new BigApp.MainPanel();
		
		var mainViewport = new Ext.Viewport({
			layout:'border',
			bufferResize: false, 
			items:[headerPanel, mainPanel]
		});
		
		mainViewport.doLayout();
			
		Ext.get('loading-mask').remove();
		Ext.get('loading').remove();
		
		console.debug('MainViewer ready!');
	}//end init
}
Ext.onReady(BigApp.MainViewer.init, BigApp.MainViewer);

El archvio para separar lo relacionado con lo que va en el panel central es: MainPanel.js serviria para poder separar lo del panel del centro por ejemplo poder crear tabs y grillas, tal como lo hace el Ext Api Documentation

Ext.ns('BigApp');  
BigApp.MainPanel = function(){
   BigApp.MainPanel.superclass.constructor.call(this, {
        id: 'main-tabs',
        region: 'center',
        margins: '3 4 4 4',
        resizeTabs: true,
        tabWidth: 150,
        minTabWidth: 120,
        enableTabScroll: true,
		bufferResize: false, 
		plain: false,
		activeTab: 0,
		items: {
			id: 'tab1',
			title: 'Home',
			closable: false,
			bufferResize: false, 
			autoLoad: {
				scripts: true,
				method: 'POST',
				url: 'welcome.html'//,
				//scope: this   <---- ESTO ES CORRECTO ????? PARA QUE SIRVE????
			}
		}
    });
};
Ext.extend(BigApp.MainPanel, Ext.TabPanel, {
    openTab : function(title){
	var id = title;
        var tab;
        if(!(tab = this.getItem(id))){
            tab = new Ext.Panel({
                id: id,
                title: title,
		html: 'Hola mundo desde ' + title +'!!!',
                closable: true,
		bufferResize: false
            });
            this.add(tab);
        }
        this.setActiveTab(tab);
    }//end openTab,
});

y el archivo que controla el panel del encabezado (la idea principal es poder independizar la carga en cada uno de los paneles, poder cargar un html independiente con sus propios js y demas)

Ext.ns('BigApp');  
BigApp.HeaderPanel = function(){
    BigApp.HeaderPanel.superclass.constructor.call(this, {
		id: 'main-header',
                region: 'north',
		border: false,
		layout: 'anchor',
		autoHeight: true,
		bufferResize: false, 
		items: {
			border: false, 
			bufferResize: false, 
			height: 41,
			autoLoad: {
				scripts: true,
				method: 'POST',
				url: 'header.html'//,
				//scope: this <---- ESTO ES CORRECTO ????? PARA QUE SIRVE????
			}
		},
		bbar:[{ 
			id: 'opentab_test_tab2',
			text: 'View in New Tab',
			handler: function(){
				mainPanel.openTab('tab2');  <--- ESTO ES LO QUE NO FUNCIONA!!!
			}//,
			//scope: this <---- ESTO ES CORRECTO ????? PARA QUE SIRVE????
		},
		'-',
		{
			id:'win',
			text: 'Go to Post'
		}]
    });
};
Ext.extend(BigApp.HeaderPanel, Ext.Panel, {
});

los HTML son asi de simples: Pag de bienvenida

Welcome to BigApp!
<script type="text/javascript">
	console.debug('Welcome.html ready!');
</script>

Pag de cabecera

<div id="header">
	<span class="topLogo"><img src="logo.gif" name="logo" border="0" height="40"></span>
</div>

Todo esto funca bien, y me permite tener un mejor control de cada una de las partes, aun falta desarrollar muuuuucho y separar por ejemplo lo de los demas paneles y ventanas etc. Pero tengo un pequeño problema: [color=#FF0000]cuando intento hacer funcionar el boton de la toolbar, no funca[/color]. [b]Podrianpor favor ayudarme con eso?[/b] Gracias a todos, les agredeceria que me dejaran sus recomendaciones sobre que aspectos deba tener en cuenta para que esta aplicacion funcione. Muchas gracias a todos.

Usuario no registrado
24/10/2009

19 Respuestas

Mejores votos Por fecha Solución

Hola genius551v Mira, lo que yo te recomiendo es dividir tu aplicación en "modulos", normalmente yo horganizo mis carpetas por módulos y dentro de cada módulo tengo los JSs, por ejemplo: +application ++usuarios ---UsuarioList.js ---UsuarioDetail.js ---UsuarioForm.js ---Usuario.js Donde el código inicial lo tengo en "Usuario.js", aquí es donde inicializo el módulo y llamo a "UsuarioList.js" donde muestro un Grid con los usuarios registrados, etc... A lo que voy es que conviene mas escribir tu código por módulos que por componentes, según veo tu estas separando tu código en componentes (HeaderPanel, MainPanel, MainViewer, etc...) normalmente lo que yo hago es crear el GUI principal dentro de un archivo que se llame "CoreSystem.js" o algo por el estilo, el cual es el responsable de inicializar el sistema, crear el GUI principal y gestionar los módulos para cargarlos dinámicamente en el momento que sea necesario. Bueno, espero me hallas entendido la idea, cualquier cosa me avisas. saludos

Crysfel Villa
26/10/2009

Stock, puedes ilustranos como se debe crear el coresystem.js que carge dinamicamente los demas modulos? Porque yo hasta ahora si creo mi aplicación por modulos pero los cargos todos los modulos y todo en el index de golpe y me relentiza muchisimo la carga inicial

Invitado
29/10/2009

checa este post: viewtopic.php?f=6&t=116&start=0&hilit=manager saludos

Crysfel Villa
29/10/2009

Gracias, con ese enlace ya entendi la teoria, aunque al ser novato no tengo la suficinete soltura para creame un manager aun, esperemos que pronto pueda ser  No tendras una versión mini y free del manager, no? Pensandolo bien no, sino hubieras pasado el enlace

Invitado
30/10/2009

Hola mi nombre es Yanieska, estoy haciendo un sistema en Ext 4 pero tengo problemas para cargar los módulos dinámicamente, esta muy buena la explicacion anterior, a mi tambien me sirvio, pero, como gestiono los módulos para cargarlos dinámicamente?. Saludos

ycortina
24/10/2013

César Méndez: tienes que hacerlo de manera MVC, carlas las vistas y luego los modulos... 24/10/2013

Hola César, gracias por responder, llevo varios días tratando de cargar los módulos dinamicamente usando el ejemplo del Desktop Ext js 4 y todavia nada, me podrias por favor poner un ejemplo, mi me puedes escribir a este correo vcuza@esuni.moa.minbas.cu ó rccardero@uci.cu, en el asunto pon siempre para Yanieska. Por favor comparteme tu experiencia, lo que pasa es que soy nueva en esto, he seguido en patron MVC pero no se como cargar los módulos dinamicamente en el getModules...Gracias de antemano. Saludos

ycortina
30/10/2013

César Méndez: Envie a tu correo la respuesta... cualquier cosa me encuentras por skype: cmendezga 30/10/2013

ycortina
30/10/2013

Hola César, a que correo mandaste la respuesta?, todavia no me ha llegado mi correo no es internacionl y tiene límites por eso te pido por favor que me lo mandes a estos dos correos vcuza@esuni.moa.minbas.cu y rccardero@uci.cu, por favor no dejes de escribir, tu eres mi esperanza, en el topic puedes poner para Yanieska que es mi nombre...Gracias.

ycortina
31/10/2013

César Méndez: create una cuenta de correo en gmail o hotmail u otro, porque es raro que no te lleguen mis correos... 31/10/2013

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