ExtJS4 erfordert einen neuen Mechanismus, der hauptsächlich den asynchronen Lademechanismus implementiert. Auf diese Weise wird die entsprechende js-Datei erst geladen, wenn auf die entsprechende Schaltfläche oder Option geklickt wird, was die Ladegeschwindigkeit und die Wartezeit des Benutzers verbessert.
Der Requires-Mechanismus wird über eine Ext.Loader.setConfig-Funktion implementiert, um das Zuordnungsverzeichnis für die Dateisuche festzulegen und dann Ext.require zu verwenden, um die entsprechende js-Datei zu laden, wenn sie benötigt wird.
Die Speicherstruktur der Datei ist wie folgt:
Der ux-Ordner befindet sich im selben Verzeichnis wie Lektion2.htm und Lektion22.js und die verwendete MyWin.js wird im ux-Ordner gespeichert.
Der Code in Lektion2.html lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>extjs4-Desktop</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>
</head>
<Körper>
<button id="myButton" align="center">zeigen</button>
</body>
</html>
In diesem Codeteil wird die Datei MyWin.js im ux-Verzeichnis nicht geladen. Wenn also die Seite geladen wird, wird die Datei MyWin.js nicht gleichzeitig geladen, sondern bei Bedarf erneut geladen. Der Bedarf wird hier durch Klicken auf die Schaltfläche erreicht.
Der Inhalt der Datei „lektion22.js“ lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
(Funktion(){
Ext.Loader.setConfig({
aktiviert:true, //Asynchronen Lademodus aktivieren
Pfade:{
myApp:'lesson2/ux' //Speicherort der Deklarationsdatei
}
});
Ext.onReady(function(){
Ext.require('ux.MyWin',function(){
var mw = Ext.create('ux.MyWin',{
title:'mein Test'
});
Ext.get('myButton').on('click',function(){
mw.show();
});
});
});
})();
Der Inhalt der Datei MyWin.js im ux-Verzeichnis lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
Ext.define('ux.MyWin',{
erweitern:'Ext.window.Window',
Titel:'Anmelden',
Breite: 400,
Höhe: 300
});
Hinweis: Der Dateiname MyWin und der Funktionsname müssen hier identisch sein. Wenn sie unterschiedlich sind, wird er nicht angezeigt.
Zu Beginn habe ich die Methode des Schreibens in der zweiten Vorlesung des ExtJS4-Lehrvideos zu uspcat verwendet, aber das gewünschte Ergebnis konnte nicht angezeigt werden. Möglicherweise liegt ein Versionsproblem vor, oder es kann mein eigenes Problem sein Dazu kann ich die Methode „requires“ verwenden. Dies ist ein Hinweis für alle, die die gleiche Verwirrung haben.