我們都知道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: http://www.apache.org/licenses/LICENSE-2.0</p>
* @author chenpeng
* @email：ceponline@yahoo.com.cn
* @version 0.1
*/
LayoutExt = function(){
//設定布局器及面板
//Ext1.1為Ext.BorderLayout
var Viewport = Ext.Viewport;
//變量設置
var root;
var layout;
//返回LayoutExt操作結果到onReady
return {
init: function(){
root = this;
//初始化Ext狀態管理器，此類可返回用戶在Cookie中的操作狀態
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
layout = new Viewport({
//布局方式，'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: '0 0 0 0'
}, //西
{
region: 'west', //顯示區域
contentEl: 'west', //綁定的content
title: 'West', //名稱
split: true,//分割欄
width: 80, //寬
margins: '0 0 0 0' //在ie下無此項會報錯
}, //東
{
region: 'east', //顯示區域
contentEl: 'east', //綁定的content
title: 'East', //名稱
width: 80,
split: true,//分割欄
margins: '0 0 0 0' //在ie下無此項會報錯
}, //南
{
region: 'south', //顯示區域
contentEl: 'south', //綁定的content
title: 'South', //名稱
split: true,//分割欄
margins: '0 0 0 0' //在ie下無此項會報錯
}, //中
new Ext.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);
LayoutExt.html(定義html頁面，設定及引用ext)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LayoutExt</title>
<!--加載ExtJs資源-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext-all.js">
</script>
<!--我的js-->
<script type="text/javascript" src="LayoutExt.js">
</script>
<!--樣式-->
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
</style>
</head>
<body>
<div id="north" class="x-layout-inactive-content">
北方
</div>
<div id="west" class="x-layout-inactive-content">
西方
</div>
<div id="east" class="x-layout-inactive-content">
東方
</div>
<div id="south" class="x-layout-inactive-content">
南方
</div>
<div id="center1" class="x-layout-inactive-content">
中央區域1
</div>
<div id="center2" class="x-layout-inactive-content">
中央區域2
</div>
</body>
</html>
顯示效果如下圖：
我們可以看到，Ext2.0的布局實際上是利用json進行元素標識后在dom元素上嵌套實現的，所以我們也可以很簡單的將其他組件插入到layout中去。
LayoutExt2.js
/**
*
* <p>Title: LoonFramework</p>
* <p>Description:Ext的內部Layout嵌套用例</p>
* <p>Copyright: Copyright (c) 2008</p>
* <p>Company: LoonFramework</p>
* <p>License: http://www.apache.org/licenses/LICENSE-2.0</p>
* @author chenpeng
* @email：ceponline@yahoo.com.cn
* @version 0.1
*/
Ext.onReady(function(){
//設定布局器及面板
var layout;
var Pane=Ext.Panel;
var Border=Ext.Viewport;
//初始化Ext狀態管理器，此類可返回用戶在Cookie中的操作狀態
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//生成內部布局
var item1 = new Pane({
title: '選項1'
});
var item2 = new Pane({
title: '選項2'
});
var item3 = new Pane({
title: '選項3'
});
//表格
var grid= new Ext.grid.PropertyGrid({
title: '表格嵌套',
closable: true,
source: {
"(name)": "grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('03/18/2008')),
"tested": false,
"version": .01,
"borderWidth": 1
}
});
layout = new Border({
layout: 'border',
items: [{
region: 'west',
title: 'west',
//此布局采用折疊樣式
layout: 'accordion',
collapsible: true,
width: 100,
minWidth: 70,
maxWidth: 150,
split: true,
//注入itme1 to 3
items: [item1, item2, item3]
}, {
region: 'center',
title: 'center',
layout:'fit',
collapsible: true,
split:true,
margins:'0 0 0 0',
//注入表格
items:[grid]
}, {
title: 'south',
//是否同步收縮
collapsible: true,
//收縮方式
collapseMode: 'mini',
region: 'south',
margins: '0 5 10 5',
height: 50,
split: true
}]
});
});
LayoutExt2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LayoutExt2</title>
<!--加載ExtJs資源-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
<!--我的js-->
<script type="text/javascript" src="LayoutExt2.js"></script>
<!--樣式-->
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
</style>
</head>
<body>
<div id="center" class="x-layout-inactive-content"/>
<div id="west" class="x-layout-inactive-content"/>
<div id="south" class="x-layout-inactive-content"/>
</body>
</html>
效果圖如下：
以上是我們手動進行的layout設置，其實在大多數時候，我們也可以利用Ext提供給我們的現成布局樣式完成操作。
如下圖所示，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: http://www.apache.org/licenses/LICENSE-2.0</p> * @author chenpeng * @email：ceponline@yahoo.com.cn * @version 0.1 */LayoutExt = function(){ //設定布局器及面板 //Ext1.1為Ext.BorderLayout var Viewport = Ext.Viewport; //變量設置 var root; var layout; //返回LayoutExt操作結果到onReady return {
init: function(){ root = this; //初始化Ext狀態管理器，此類可返回用戶在Cookie中的操作狀態 Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); layout = new Viewport({ //布局方式，'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: '0 0 0 0' }, //西 { region: 'west', //顯示區域 contentEl: 'west', //綁定的content title: 'West', //名稱 split: true,//分割欄 width: 80, //寬 margins: '0 0 0 0' //在ie下無此項會報錯 }, //東 { region: 'east', //顯示區域 contentEl: 'east', //綁定的content title: 'East', //名稱 width: 80, split: true,//分割欄 margins: '0 0 0 0' //在ie下無此項會報錯 }, //南 { region: 'south', //顯示區域 contentEl: 'south', //綁定的content title: 'South', //名稱 split: true,//分割欄 margins: '0 0 0 0' //在ie下無此項會報錯 }, //中 new Ext.TabPanel({ region: 'center', deferredRender: false, activeTab: 0, //活動的tab索引 items: [{ contentEl: 'center1', title: '中央區域1', closable: true, //關閉項 autoScroll: true //是否自動顯示滾動條 }, { contentEl: 'center2', title: '中央區域2', autoScroll: true }] }) ] }); } };}();//加載onReadyExt.onReady(LayoutExt.init, LayoutExt, true);LayoutExt.html(定義html頁面，設定及引用ext)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>LayoutExt</title> <!--加載ExtJs資源--> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/> <script type="text/javascript" src="adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="ext-all.js"> </script> <!--我的js--> <script type="text/javascript" src="LayoutExt.js"> </script> <!--樣式--> <style type="text/css"> html, body { font: normal 12px verdana; margin: 0; padding: 0; border: 0 none; overflow: hidden; height: 100%; } </style> </head> <body> <div id="north" class="x-layout-inactive-content"> 北方 </div> <div id="west" class="x-layout-inactive-content"> 西方 </div> <div id="east" class="x-layout-inactive-content"> 東方 </div> <div id="south" class="x-layout-inactive-content"> 南方 </div> <div id="center1" class="x-layout-inactive-content"> 中央區域1 </div> <div id="center2" class="x-layout-inactive-content"> 中央區域2 </div> </body></html>顯示效果如下圖：
我們可以看到，Ext2.0的布局實際上是利用json進行元素標識后在dom元素上嵌套實現的，所以我們也可以很簡單的將其他組件插入到layout中去。
LayoutExt2.js
/** * * <p>Title: LoonFramework</p> * <p>Description:Ext的內部Layout嵌套用例</p> * <p>Copyright: Copyright (c) 2008</p> * <p>Company: LoonFramework</p> * <p>License: http://www.apache.org/licenses/LICENSE-2.0</p> * @author chenpeng * @email：ceponline@yahoo.com.cn * @version 0.1 */Ext.onReady(function(){ //設定布局器及面板 var layout; var Pane=Ext.Panel; var Border=Ext.Viewport; //初始化Ext狀態管理器，此類可返回用戶在Cookie中的操作狀態 Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); //生成內部布局 var item1 = new Pane({ title: '選項1' }); var item2 = new Pane({ title: '選項2' }); var item3 = new Pane({ title: '選項3' }); //表格 var grid= new Ext.grid.PropertyGrid({ title: '表格嵌套', closable: true, source: { "(name)": "grid", "grouping": false, "autoFitColumns": true, "productionQuality": false, "created": new Date(Date.parse('03/18/2008')), "tested": false, "version": .01, "borderWidth": 1 } }); layout = new Border({ layout: 'border', items: [{ region: 'west', title: 'west', //此布局采用折疊樣式 layout: 'accordion', collapsible: true, width: 100, minWidth: 70, maxWidth: 150, split: true, //注入itme1 to 3 items: [item1, item2, item3] }, { region: 'center', title: 'center', layout:'fit', collapsible: true, split:true, margins:'0 0 0 0', //注入表格 items:[grid] }, { title: 'south', //是否同步收縮 collapsible: true, //收縮方式 collapseMode: 'mini', region: 'south', margins: '0 5 10 5', height: 50, split: true }] }); });LayoutExt2.html
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>LayoutExt2</title> <!--加載ExtJs資源--> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all-debug.js"></script> <!--我的js--> <script type="text/javascript" src="LayoutExt2.js"></script> <!--樣式--> <style type="text/css"> html, body { font: normal 12px verdana; margin: 0; padding: 0; border: 0 none; overflow: hidden; height: 100%; } </style></head><body> <div id="center" class="x-layout-inactive-content"/> <div id="west" class="x-layout-inactive-content"/> <div id="south" class="x-layout-inactive-content"/></body></html>效果圖如下：
以上是我們手動進行的layout設置，其實在大多數時候，我們也可以利用Ext提供給我們的現成布局樣式完成操作。
每種布局類都支持其特定的配置選項。關于布局每種配置選項可參考API文檔。
|
|
ContainerLayout |
 |
CardLayoutCardLayout將容器中的每個組件當作一個卡片來處理。在某一時間，只有一個卡片是可見的，容器象一個卡片堆棧一樣工作。大多數的情況，用于向導（Wizards），制定的tab實現或其它多頁面信息的場合。參閱API 參考。 |
|
|
這是一個非常簡單的布局，通過X/Y坐標精確來定位包含各項的相關容器。參閱API 參考. |
|
適用于多個列并排結構的布局風格，每個列的寬度須由像素值或百分比指定，但高度自適應于內容的高度。詳細在API參考. |
|
|
AccordionLayout包含了一組像卡片垂直方向堆棧的面板，同通過展開或收縮來顯示內容在某一時間，只有一個卡片是可見的。詳細在API參考. |
|
這是一個簡單的布局，主要是創建一個適應容器大小的布局區域。如沒有特定的布局要求這是容器最好的默認布局。詳細在API參考. |
|
|
這是為一些固定元素相對于容器四條邊的布局。元素可通過與邊緣的百分比或便宜一個值來定位， and it also supports a virtual layout canvas that can have different dimensions than the physical container. 詳細在API文檔。 |
|
FormLayout是為創建一張要提交數據條目的表單而設計的布局風格。注意，一般來講，和FormPanel相似，該布局類都有表單提交的自動處理，你會更傾向使用前者。 FormPanels必須指定layout:'form'（只能一定是這樣）,所以表單額外需要的一個布局將其嵌套。 參閱API文檔。 |
|
|
與1.x的BorderLayout的布局完全一致。布局區域支持嵌套， 滑動條面板和可關閉、微調的分隔區域。對于一些典型的業務程序的首要UI尤為適用。詳細API文檔。 |
|
主要目的是通過一個表格的形式劃分區域。實際上也是生成一個table的HTML makeup 詳細在API參考。 |
浙公網安備 33010602011771號