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

2019-11-20 21:31:52

字體：大中小

供稿：網(wǎng)友

ExtJS4的requires是新增的機(jī)制，主要是實(shí)現(xiàn)異步加載機(jī)制。這樣在不點(diǎn)擊對(duì)應(yīng)的按鈕或者選項(xiàng)的時(shí)候就不會(huì)加載對(duì)應(yīng)的js文件，提高了加載速度和用戶等待時(shí)間。

requires機(jī)制的實(shí)現(xiàn)通過一個(gè)Ext.Loader.setConfig函數(shù)來設(shè)置文件尋找的映射目錄，然后在需要用到對(duì)應(yīng)js文件的時(shí)候使用Ext.require進(jìn)行加載。

文件的存儲(chǔ)結(jié)構(gòu)如下所示：

ux文件夾和lesson2.htm和lesson22.js在相同的目錄下，而使用到的MyWin.js存放在ux的文件夾中。

在lesson2.html中的代碼如下所示：

復(fù)制代碼代碼如下:

 
<!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文件，那么在加載該頁面的時(shí)候，并不會(huì)把MyWin.js文件同時(shí)加載進(jìn)來，只是在需要的時(shí)候再加載。這里的需要是通過點(diǎn)擊button來實(shí)現(xiàn)的。

lesson22.js文件內(nèi)容如下所示：

復(fù)制代碼代碼如下:

 
(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文件內(nèi)容如下所示：

復(fù)制代碼代碼如下:

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

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

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

上一篇：ExtJS4中使用mixins實(shí)現(xiàn)多繼承示例

下一篇：利用JS進(jìn)行圖片的切換即特效展示圖片