ExtJS4 には、主に非同期読み込みメカニズムを実装するための新しいメカニズムが必要です。このようにして、対応するボタンまたはオプションをクリックしない限り、対応する js ファイルは読み込まれないため、読み込み速度とユーザーの待ち時間が改善されます。
requires メカニズムの実装では、Ext.Loader.setConfig 関数を使用してファイル検索用のマッピング ディレクトリを設定し、必要なときに Ext.require を使用して対応する js ファイルをロードします。
ファイルの格納構造は次のとおりです。
ux フォルダーは、lesson2.htm および Lesson22.js と同じディレクトリにあり、使用される MyWin.js は、フォルダ内のux。
lesson2.html のコードは次のとおりです:
extjs4 デスクトップ< ;/title> ;
このコード部分では、ux ディレクトリにあります。ファイルがロードされていない場合、ページがロードされるときに、MyWin.js ファイルは同時にロードされず、必要な場合にのみロードされます。ここでの必要性は、ボタンをクリックすることで実現されます。
lesson22.js ファイルの内容は次のとおりです。
(function(){
Ext.Loader.setConfig({
enabled:true, //非同期読み込みモードを有効にする
paths:{
myApp:' lesson2/ux' //ステートメント ファイルの場所
}
Ext.onReady(function(){
Ext.require('ux.MyWin',function) (){
var mw = Ext.create('ux.MyWin',{
title:'my Test'
});
Ext.get('myButton'); on('click',function() {
mw.show();
})
}); >
ux ディレクトリ .define('ux.MyWin',{
extend:'Ext.window.Window',
title:'sign up' の下の MyWin.js ファイルの内容) ,
width:400,
height:300
} );
注: ここでのファイル名 MyWin と関数名は同じである必要があります。異なる場合は表示されません。
最初はuspcatのExtJS4教則動画の第2回の書き方を使ったのですが、バージョンの問題か私自身の問題かもしれません。この変更により、requires メソッドを使用できるようになります。同じように迷っている方へのメモです。