ExtJS2.0開發與實踐筆記[2]——Ext中的Layout
阿新 • • 發佈：2020-10-09
我們都知道java中有佈局管理器的概念，通過調整佈局器可以簡化我們對可視元件的管理。而在Ext中同樣提供了自己的佈局實現，以簡化web介面的開發與定製。
如下圖所示，Ext的Layout可分解為東、西、南、北、中5個基本區域。
在ExtJS2.0實現中，我們可以寫成如下程式碼樣式。ExtJS2.0配置方法如下：初識ExtJS
LayoutExt.js
![]()
![]()
/**//**
![]()
*<p>Title:LoonFramework</p>
![]()
*<p>Description:Ext的Layout用例</p>
![]()
*<p>Copyright:Copyright(c)2008</p>
![]()
*<p>Company:LoonFramework</p>
![]()
*<p>License:[url]http://www.apache.org/licenses/LICENSE-2.0</p>[/url]
![]()
*@authorchenpeng
![]()
*@email：[email][email protected][/email]
![]()
*@version0.1
![]()
*/
![]()
![]()
LayoutExt=function()...{
![]()
//設定佈局器及面板
![]()
//Ext1.1為Ext.BorderLayout
![]()
varViewport=Ext.Viewport;
![]()
//變數設定
![]()
varroot;
![]()
varlayout;
![]()
//返回LayoutExt操作結果到onReady
![]()
![]()
return...{
![]()
![]()
init:function()...{
![]()
root=this;
![]()
//初始化Ext狀態管理器，此類可返回使用者在Cookie中的操作狀態
![]()
Ext.state.Manager.setProvider(new
![]()
![]()
![]()
layout=newViewport(...{
![]()
//佈局方式，'border'
![]()
layout:'border',
![]()
items:[//北
![]()
![]()
...{
![]()
region:'north',//顯示區域
![]()
contentEl:'north',//繫結的content
![]()
title:'North',//名稱
![]()
split:false,//分割線
![]()
collapsible:true,//是否允許折起
![]()
//在ie下無此項會報錯(firefox無事……),預設分別為此佈局左、上、右、下的邊距,以此防止越界造成的崩潰。
![]()
//也可寫作'Object:數值'的形式，如margins：{top:0,left:0,right:0,bottom:0}
![]()
margins:'0000'
![]()
},//西
![]()
![]()
...{
![]()
region:'west',//顯示區域
![]()
contentEl:'west',//繫結的content
![]()
title:'West',//名稱
![]()
split:true,//分割欄
![]()
width:80,//寬
![]()
margins:'0000'//在ie下無此項會報錯
![]()
},//東
![]()
![]()
...{
![]()
region:'east',//顯示區域
![]()
contentEl:'east',//繫結的content
![]()
title:'East',//名稱
![]()
width:80,
![]()
split:true,//分割欄
![]()
margins:'0000'//在ie下無此項會報錯
![]()
},//南
![]()
![]()
...{
![]()
region:'south',//顯示區域
![]()
contentEl:'south',//繫結的content
![]()
title:'South',//名稱
![]()
split:true,//分割欄
![]()
margins:'0000'//在ie下無此項會報錯
![]()
},//中
![]()
![]()
newExt.TabPanel(...{
![]()
region:'center',
![]()
deferredRender:false,
![]()
activeTab:0,//活動的tab索引
![]()
![]()
items:[...{
![]()
contentEl:'center1',
![]()
title:'中央區域1',
![]()
closable:true,//關閉項
![]()
autoScroll:true//是否自動顯示滾動條
![]()
![]()
},...{
![]()
contentEl:'center2',
![]()
title:'中央區域2',
![]()
autoScroll:true
![]()
}]
![]()
})
![]()
]
![]()
});
![]()
}
![]()
};
![]()
}
![]()
();
![]()
//載入onReady
![]()
Ext.onReady(LayoutExt.init,LayoutExt,true);
![]()
如下圖所示，Ext的Layout可分解為東、西、南、北、中5個基本區域。
在ExtJS2.0實現中，我們可以寫成如下程式碼樣式。ExtJS2.0配置方法如下：初識ExtJS
LayoutExt.js