ExtJS4中的requires使用方法示例介紹

2019-11-20 21:31:52

字體：大中小

來源：轉載

供稿：網友

ExtJS4的requires是新增的機制，主要是實現異步加載機制。這樣在不點擊對應的按鈕或者選項的時候就不會加載對應的js文件，提高了加載速度和用戶等待時間。

requires機制的實現通過一個Ext.Loader.setConfig函數來設置文件尋找的映射目錄，然后在需要用到對應js文件的時候使用Ext.require進行加載。

文件的存儲結構如下所示：

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> 
<head> 
<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> 
<body> 
<button id="myButton" align="center">show</button> 
</body> 
</html> 

在該代碼片中，并未加載ux目錄下的MyWin.js文件，那么在加載該頁面的時候，并不會把MyWin.js文件同時加載進來，只是在需要的時候再加載。這里的需要是通過點擊button來實現的。

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目錄下的MyWin.js文件內容如下所示：

復制代碼代碼如下:

 
Ext.define('ux.MyWin',{ 
extend:'Ext.window.Window', 
title:'sign up', 
width:400, 
height:300 
}); 

注意：這里的文件名稱MyWin和函數名稱必須一樣，我試驗了一下，如果不一樣也會造成無法顯示。

剛開始我使用的方法是uspcat上的ExtJS4教學視頻第二講的寫法進行書寫，但是始終無法出現我想要的結果，可能是版本問題，也可能是自己的問題，通過這樣修改，能夠使用requires方法了。特此為記，供有相同困惑的人使用。

上一篇：ExtJS4中使用mixins實現多繼承示例

下一篇：利用JS進行圖片的切換即特效展示圖片