分類  >  Web前端 >

EXT組件的運用和延遲載入

tags:    時間:2013-12-10 07:44:48
EXT組件的使用和延遲載入
組件可以直接通過new 關鍵子來創建,比如控制項一個窗口,使用new Ext.Window(),
創建一個表格則使用new Ext.GridPanel()。當然,除了一些普通的組件以外,一般都會在構
造函數中通過傳遞構造參數來創建組件。
組件的構造函數中一般都可以包含一個對象,這個對象包含創建組件所需要的配置屬性
及值,組件根據構造函數中的參數屬性值來初始化組件。比如下面的例子:

 var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'}; var panel=new Ext.Panel(obj);  panel.render("hello"); <div id="hello">&nbsp;</div> 

可以省掉變數obj,直接寫成如下的形式:
var panel=new Ext.Panel({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'}); panel.render("hello");

render 方法後面的參數表示頁面上的div 元素id,也可以直接在參數中通過renderTo 參
數來省略手動調用render 方法,只需要在構造函數的參數中添加一個renderTo 屬性即可,
如下:
new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source </h1>'});

對於容器中的子元素組件,都支持延遲載入的方式創建控制項,此時可以直接通過在需要
父組件的構造函數中,通過給屬性items 傳遞數組方式實現構造。如下面的代碼:
var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板 2",height:30},{title:"面板3",height:30}]});panel.render("hello");

這些代碼定義了TabPanel 這個容器控制項中的子元素,里包括三個面板。上面的代碼與下面的代碼等價:
var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});panel.render("hello");

前者不但省略掉了new Ext.Panel 這個構造函數,最重要前者只有在初始化TabPanel 的
時候,才會創建子面板,而第二種方式則在程序一開始就會創建子面板。也就是說,前者實
現的延遲載入。

推薦閱讀文章

Bookmark the permalink ,來源:互聯網