ExtJS4 には、主に非同期読み込みメカニズムを実装するための新しいメカニズムが必要です。このようにして、対応するボタンまたはオプションをクリックしない限り、対応する js ファイルは読み込まれないため、読み込み速度とユーザーの待ち時間が改善されます。
Required メカニズムは、ファイル検索用のマッピング ディレクトリを設定する Ext.Loader.setConfig 関数を通じて実装され、必要なときに Ext.require を使用して対応する js ファイルをロードします。
ファイルの格納構造は次のとおりです。
ux フォルダーは、lesson2.htm、lesson22.js と同じディレクトリにあり、使用する MyWin.js は ux フォルダーに格納されています。
lesson2.html のコードは次のとおりです。
次のようにコードをコピーします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>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>
</head>
<本文>
<button id="myButton" align="center">表示</button>
</body>
</html>
このコード部分では、ux ディレクトリ内の MyWin.js ファイルはロードされないため、ページがロードされるときに、MyWin.js ファイルは同時にロードされず、必要に応じて再度ロードされます。ここでの必要性は、ボタンをクリックすることで実現されます。
lesson22.js ファイルの内容は次のとおりです。
次のようにコードをコピーします。
（関数（）{
Ext.Loader.setConfig({
Enabled:true, //非同期読み込みモードを有効にする
パス:{
myApp:'lesson2/ux' //宣言ファイルの場所
}
});
Ext.onReady(function(){
Ext.require('ux.MyWin',function(){
var mw = Ext.create('ux.MyWin',{
タイトル:「私のテスト」
});
Ext.get('myButton').on('click',function(){
mw.show();
});
});
});
})();
ux ディレクトリ内の MyWin.js ファイルの内容は次のとおりです。
次のようにコードをコピーします。
Ext.define('ux.MyWin',{
extend:'Ext.window.Window',
タイトル:「サインアップ」、
幅:400、
高さ:300
});
注: ここでのファイル名 MyWin と関数名は同じである必要があります。異なる場合は表示されません。
最初は uspcat の ExtJS4 教則ビデオの第 2 回目の記述方法を使用しましたが、それでも思ったような結果が得られませんでした。バージョンの問題か、私自身の問題かもしれません。 、requiresメソッドを使用できます。同じように悩んでいる方へのメモです。