ExtJS2 0開發與實踐筆記 2 ——Ext中的Layout
阿新 • • 發佈：2018-11-16
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
我們都知道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> * @author chenpeng * @email：[email protected] * @version 0.1
*/
LayoutExt
=
function
()
...
{ //設定佈局器及面板 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：[email protected] * @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,