Foro

Como enlazar modulos con extjs

0
Hola Estoy trabajando con symfony y extjs, estoy trabajando por módulos y quisiera ver como podría llamar a una variable desde otro modulo, por ejemplo que desde un toolbar ponga un botón que me habrá un formulario de otro modulo, Me mencionaban que tendría que cargar todos los js de los módulos al principio, pero pues se me hace demasiado, no se si habrá otra forma de implementar esto.....

9 Respuestas

Mejores votos Por fecha Solución
0
Mira... en mi experiencia te puedo decir que no es buena idea cargar todos los JSs desde el principio ya que el explorador se sobrecarga y puede tardar mas tiempo en cargar tu sistema, lo que te recomiendo es que hagas un administrador de modulos, y cuando necesites entrar a un nuevo módulo cargues el JS necesario para ese módulo (los módulos deben estar debidamente empaquetados) si no lo has cargado anteriormente, otro consejo es que tengas mucho cuidado al cargar los nuevos módulos, lo que te recomiendo hacer es definir en el servidor los módulos que se pueden cargar, de esta manera evitas que algún usuario malintencionado cargue cualquier otra cosa. saludos
0
NO hace falta cargar todos los mudulos, lo que yo hago (no se si bien o mal) pero funciona, es: todas las paginas las hago como paginas .php ninguna .js asi puedo hacer includes una dentro de la otra, pasar variables y llamarlas por ajax. Un ejemplo : tengo la paginas index.php con un formulario y un boton que va a llamar a otra en la que hay un window. pagina index.php 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mi titulo</title>
</head>  
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<body>
<div id="preload" style="background-color:white; width:100%;height:100%;z-index:50000;">
	<div id="loadBox" class="loadBox" >
		<img src="imgs/gifinicio.gif" alt="cargando" />	
		<p id="loading-msg"></p>		
	</div>
</div>
<!-- GC -->
 	<!-- LIBS -->
 <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando Núcleo...';</script>
 <link rel="stylesheet" type="text/css" href="css/icons.css">
<link rel="stylesheet" type="text/css" href="css/filetype.css">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-slate.css">
<script type="text/javascript" src="ext/adapter/jquery/jquery.js"></script>  
<script type="text/javascript" src="ext/adapter/jquery/ext-jquery-adapter.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript" src="ext/source/locale/ext-lang-es.js"></script>
<!-- <script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="fckeditor/ext.FCKEditor.js"></script>-->
<!-- plugins -->
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando componentes...';</script>
<script type="text/javascript" src="ext/plugins/RowExpander.js"></script>
<script type="text/javascript" src="ext/plugins/Ext.ux.util.js"></script>
<script type="text/javascript" src="ext/plugins/Ext.ux.grid.Search.js"></script>
<script type="text/javascript" src="ext/plugins/Ext.ux.form.LovCombo.js"></script>
<script type="text/javascript" src="ext/plugins//Ext.ux.ThemeCombo.js"></script>
<script type="text/javascript" src="ext/plugins/Ext.ux.grid.RowActions.js"></script>
	 <!-- plugins filtros -->
<script type="text/javascript" src="ext/plugins/filters/EditableItem.js"></script>
<script type="text/javascript" src="ext/plugins/filters/RangeMenu.js"></script>
<script type="text/javascript" src="ext/plugins/filters/GridFilters.js"></script>
<script type="text/javascript" src="ext/plugins/filters/filter/Filter.js"></script>
<script type="text/javascript" src="ext/plugins/filters/filter/StringFilter.js"></script>
<script type="text/javascript" src="ext/plugins/filters/filter/DateFilter.js"></script>
<script type="text/javascript" src="ext/plugins/filters/filter/ListFilter.js"></script>
<script type="text/javascript" src="ext/plugins/filters/filter/NumericFilter.js"></script>
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Inicializando...';</script>
<script type="text/javascript" src="ext/plugins/filters/filter/BooleanFilter.js"></script>
	 <!-- fin plugins filtros -->
<!-- fin plugins -->
<div id="oculto" style="display:none"></div>
<?php
include("include.php");
?>
</body>
</html>
la pagina include.php 
<script type="text/javascript">
var loading = document.getElementById('preload');
loading.parentNode.removeChild(loading);
Ext.BLANK_IMAGE_URL="ext/resources/images/default/s.gif";
Ext.onReady(function(){
	criterios=0;
	Ext.QuickTips.init();
       //codigo para el formulario 
//y la funcion al apretar el boton seria
  function boton(aquien){
		Ext.getCmp('layout-statusbar').showBusy('Cargando...');	
		Ext.get("oculto").load({
			url: aquien,// aquien es la ruta hacia la paginas php por ejempplo secciones/pagina.php
			scripts:true							
			
		});
}
});
</script>
y en la pagina a la que llamamos lo mismo 
<script language="JavaScript" type="text/javascript">
//codigo para la ventana
</script>
de esta manera tmb puedo acceder a los distintos componentes de cada pagina. Espero haberme explicado bien y que sea lo que necesitas <!-- s;) --><!-- s;) --> Si tienes alguna duda me dices.
0
creo que hemos llegado a la pregunta del millon, jeje como hacer para organizar una aplicacion grande cargar todo al inicio o cargar cuando se use, creo que lo mejor es cargar cuando se use pero aqui viene otro problema las dependencias. en el foro oficial de extjs hay casi todo un docuemental acerca de este tema <!-- s:( --><!-- s:( -->, jeje al menos en m caso yo ocupo el modelo de saki, en el cual se cargan las deifiniciones de las clases pero conforme se van ocupando se van creando en memoria es un poco tardado al inicio pero podemos lograr una exelente reduccion en el tiempo de carga utilizando un buen compresor y un buen ofuscador de codigo como el de yui o el de dojo
0
Yo cargo todo conforme se va usando <!-- s;) --><!-- s;) --> Para resolver lo de las dependencias, creo un archivo que se llama "module" y ahi defino todos los archivos JS que voy a utilizar para el módulo, ejemplo: 
/javascript/ext-2.2/plugins/FileManager.js
/app/alumnos/AlumnoHelper.js
/app/alumnos/AlumnoMain.js
Luego, mediante un Manager cargo únicamente los archivos que no han sido cargados anteriormente, es decir si un plugin es utilizado en otros módulos, el manager revisa si ya lo descargó, de no ser así lo descarga. En el menu principal apunto a los archivos "module". Al inicio de la aplicación solo se carga el "nucleo" del sistema, es decir, el core, los menus principales y todo lo que se ocupe para el inicio de la aplicación. saludos <!-- s:D --><!-- s:D -->
0
Gracias por sus respuestas, yo igual hago todas mis archivos .php, y pues como estoy trabajando con symfony los incluyo como parciales, creo que me iré por la opción de crear un manager para ver las dependencias y cargar solo los archivos necesarios......ahi luego les cuento como me va.....saludos
0
stock pudieras poner un ejemplo del manager de que hablas me refiero a poner el código pues no entiendo muy bien quizas si vea el código entienda mejor. saludos
0
Mira... el código no lo puedo poner porque pertenece a la empresa a la que trabajo... pero te pongo algo de pseudocódigo con un poco de código jejejejejeje 
Manager.ModuleLoader = {
	scripts: new Ext.util.MixedCollection(), //<--- el cache
	loadModule: function(path, callback){
		var url = this.getModuleUrl(path); //aqui saco la URL donde esta el archivo "module"
		Ext.Ajax.request({ //cargo el archivo usando ajax
			method:'POST',
			url: url,
			success: function(response){
				var jsList=response.responseText.split("\n"); //tomo las URLs de los cript en un array
				var newScripts = [];
				for (var i=0;i<jsList.length;i++){
					var js = jsList[i].trim();
					if (js.length > 0){
						newScripts .push({url:Manager.getFullUrl(js)});
					}
				}
				if (newScripts.length > 0){
				//aqui revisas si ya esta en el  cache ("this.scripts")
				if(estacargado){
				//puedes disparar el callback aqui...
				}else{
				//si no esta los cargamos con ls siguiente linea
					var sl = new Ext.ux.ScriptLoader(scripts); //esta extensión sa para cargar los scripts
					sl.on('done', callback.success); //un callback (si aplica)
					sl.load(); //hacemos la carga
				}
				}else{
					callback.success([]);
				}
				
			},
			failure: function(response){
				Ext.MessageBox.alert("Error", "Imposible cargar el modulo.");
				callback.failure();
			}
		});
	},
	getModuleUrl: function(url){
		var url = Manager.getFullUrl(url); // este método le agrega el CONTEXTO si existe
		if (url.charAt(url.length-1)!="/")
			url += "/";
		return url+"module"; // <--- este es el famoso "module" donde estan definidas todos los scripts para el módulo que se va a cargar
	}
};
Bueno, solo te puse la parte del manager (una parte), pero espero te des una idea mejor, la extensión que hace la carga de los scripts unicamente verifica que sea una URL valida, le aplica unas reglas de seguridad y hace la carga mediante Ajax, luego hace un "eval" y listo!! como nuestros módulos estan empaquetados (así como en los tutoriales de quizzpot) funciona muy bien. saludos
0
ahora entiendo mucho mejor gracias
0
yo... utilizo CodeIgniter + la libreria AsettLibPro lo que hace esa libreria... me carga todos los js al principio, solamente que la primera vez que la carga, me genera un php con el codigo de todos los archivos.. minimizados con JSMIN y comprimidos con gzip lo cual reduce muuuuucho el peso final. Y despues lo unico que tiene que hacer es volver a ese php y para mi funciona bien.. tengo una aplicacion que pesa unos 800 kb y no tarda casi nada en cargar. Eso del Manager de modulos no lo entendi bien <!-- s:P --><!-- s:P -->

¿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