ExtJS4的requires是新增的機制,主要是實現異步加載機制。這樣在不點擊對應的按鈕或者選項的時候就不會加載對應的js文件,提高了加載速度和用戶等待時間。
requires機制的實現通過一個Ext.Loader.setConfig函數來設置文件尋找的映射目錄,然后在需要用到對應js文件的時候使用Ext.require進行加載。
文件的存儲結構如下所示:
復制代碼 代碼如下:
<!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 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>show</button>
</body>
</html>
復制代碼 代碼如下:
(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();
});
});
});
})();
復制代碼 代碼如下:
Ext.define('ux.MyWin',{
extend:'Ext.window.Window',
title:'sign up',
width:400,
height:300
});
新聞熱點
疑難解答
圖片精選