Lo que requiere ExtJS4 es un nuevo mecanismo, principalmente para implementar un mecanismo de carga asincrónico. De esta forma, el archivo js correspondiente no se cargará a menos que se haga clic en el botón u opción correspondiente, lo que mejora la velocidad de carga y el tiempo de espera del usuario.
El mecanismo de requisitos se implementa a través de una función Ext.Loader.setConfig para configurar el directorio de mapeo para la búsqueda de archivos y luego usar Ext.require para cargar el archivo js correspondiente cuando sea necesario.
La estructura de almacenamiento del archivo es la siguiente:
La carpeta ux está en el mismo directorio que lección2.htm y lección22.js, y el MyWin.js utilizado se almacena en la carpeta ux.
El código en lección2.html es el siguiente:
Copie el código de código de la siguiente manera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; conjunto de caracteres=GBK">
<título>escritorio extjs4</título>
<!-- css -->
<enlace rel="hoja de estilo" tipo="text/css" href="../../extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="../../extjs4/bootstrap.js"></script>
<script tipo="text/javascript" src="lesson22.js"></script>
</cabeza>
<cuerpo>
<botón id="miBotón" align="center">mostrar</botón>
</cuerpo>
</html>
En este fragmento de código, el archivo MyWin.js en el directorio ux no está cargado, por lo que cuando se carga la página, el archivo MyWin.js no se cargará al mismo tiempo, sino que se cargará nuevamente cuando sea necesario. La necesidad aquí se logra haciendo clic en el botón.
El contenido del archivo lección22.js es el siguiente:
Copie el código de código de la siguiente manera:
(función(){
Ext.Loader.setConfig({
enable:true, //Habilitar el modo de carga asincrónica
caminos: {
myApp:'lesson2/ux' //Ubicación del archivo de declaración
}
});
Ext.onReady(función(){
Ext.require('ux.MyWin',función(){
var mw = Ext.create('ux.MyWin',{
título:'mi prueba'
});
Ext.get('miBotón').on('hacer clic',función(){
mw.mostrar();
});
});
});
})();
El contenido del archivo MyWin.js en el directorio ux es el siguiente:
Copie el código de código de la siguiente manera:
ext.define('ux.MyWin',{
extender:'Ventana.Ext.Ventana',
título: 'registrarse',
ancho: 400,
altura: 300
});
Nota: El nombre del archivo MyWin y el nombre de la función aquí deben ser los mismos. Lo probé. Si son diferentes, no se mostrará.
Al principio, utilicé el método de escritura en la segunda conferencia del video de enseñanza de ExtJS4 sobre uspcat, pero el resultado que quería no pudo aparecer. Puede ser un problema de versión o puede ser mi propio problema. Para esto, puedo usar el método require. Esta es una nota para cualquiera que tenga la misma confusión.