ExtJS4 nécessite un nouveau mécanisme, principalement pour implémenter un mécanisme de chargement asynchrone. De cette façon, le fichier js correspondant ne sera chargé que si le bouton ou l'option correspondant est cliqué, ce qui améliore la vitesse de chargement et le temps d'attente de l'utilisateur.
Le mécanisme require est implémenté via une fonction Ext.Loader.setConfig pour définir le répertoire de mappage pour la recherche de fichiers, puis utiliser Ext.require pour charger le fichier js correspondant lorsque cela est nécessaire.
La structure de stockage du fichier est la suivante :
Le dossier ux se trouve dans le même répertoire que lesson2.htm et lesson22.js, et le MyWin.js utilisé est stocké dans le dossier ux.
Le code dans lesson2.html est le suivant :
Copiez le code comme suit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<tête>
<méta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>bureau extjs4</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="../../extjs4/bootstrap.js"></script>
<script type="text/javascript" src="lesson22.js"></script>
</tête>
<corps>
<button id="myButton" align="center">afficher</button>
</corps>
</html>
Dans ce morceau de code, le fichier MyWin.js dans le répertoire ux n'est pas chargé, donc lorsque la page est chargée, le fichier MyWin.js ne sera pas chargé en même temps, mais sera rechargé en cas de besoin. Le besoin ici est satisfait en cliquant sur le bouton.
Le contenu du fichier lesson22.js est le suivant :
Copiez le code comme suit :
(fonction(){
Ext.Loader.setConfig({
activé:true, //Activer le mode de chargement asynchrone
chemins :{
myApp:'lesson2/ux' //Emplacement du fichier de déclaration
}
});
Ext.onReady(fonction(){
Ext.require('ux.MyWin',function(){
var mw = Ext.create('ux.MyWin',{
titre : « mon test »
});
Ext.get('myButton').on('click',function(){
mw.show();
});
});
});
})();
Le contenu du fichier MyWin.js dans le répertoire ux est le suivant :
Copiez le code comme suit :
Ext.define('ux.MyWin',{
extend:'Ext.window.Window',
titre : 'inscrivez-vous',
largeur:400,
hauteur:300
});
Remarque : Le nom du fichier MyWin et le nom de la fonction ici doivent être identiques. Je l'ai testé s'ils sont différents, il ne sera pas affiché.
Au début, j'ai utilisé la méthode d'écriture dans le deuxième cours de la vidéo pédagogique ExtJS4 sur uspcat, mais je n'ai toujours pas pu obtenir les résultats souhaités. Il peut s'agir d'un problème de version ou de mon propre problème en le modifiant ainsi. , je peux utiliser la méthode require . Ceci est une note pour ceux qui ont la même confusion.