Ext布局
ExtJS常用的布局都在Ext.layout下，這里幾乎涵蓋了所有的布局方式（但是值得注意的是通常我們不是直接通過new來創(chuàng)建這些類的對象然后往里面添加控件使用，而是作為控件一個配置屬性使用讓Ext自動創(chuàng)建對應的類），滿足開發(fā)者需求。那么我們就其中常用的方式逐一介紹。
??
?
核心技能部分
1.1?布局的用途
所謂布局，簡單來說就是在頁面中的各個元素怎樣擺放。對管理系統(tǒng)來說，有一種非常典型的布局方式，頭部放置標題，左邊放樹形菜單，空余的部分用來顯示內(nèi)容
?
圖4.1.1的布局方式比較典型。使用Ext制作這種布局布局簡單，代碼如示例4.1所示。
示例4.1
Ext.onReady(function() {
var viewport = new Ext.Viewport({
???????layout: 'border',
???????items: [{
????????????region: 'north',
????????????height: 50,
????????????html: '<h1>上標題</h1>'
???????},{
????????????region: 'west',
????????????width: 100,
????????????html: '<p>菜單1</p><p>菜單2</p>'
???????},{
????????????region: 'center',
????????????html: '顯示內(nèi)容主區(qū)域'
???????}]
????});
});
在示例4.1中，使用Ext.Viewport對象對整個頁面進行布局，構(gòu)造這個對象主要有兩個配置參數(shù)：layout和items。其中layout:‘border’，表示使用了BorderLayout的布局方式，這種布局稱為邊框布局，它將整個頁面分割成東、西、南、北、中5個區(qū)域。使用items屬性向布局中添加控件，在本例中使用region:?‘north’、 region:?‘west’、 region:?‘center’把整個頁面分為北、西、中間3個區(qū)域。雖然這個布局還略顯粗糙，但也可以自動檢測瀏覽器的大小變化和自動適應布局中每個部分的大小。
為了實現(xiàn)良好的頁面布局，ExtJS提供了多種各式各樣的布局，下面就將學習各種常見布局。
1.2?最簡單布局—FitLayout
有一個很簡單的需求：客戶需要在頁面中顯示一個表格，讓它可以自適應頁面大小的變化，頁面變大的時候表格會變大，頁面變小的時候表格也會變小。
要想實現(xiàn)這一需求就可以使用FitLayout實現(xiàn)，代碼如示例4.2所示。
示例4.2
Ext.onReady(function(){
????var store = new Ext.data.SimpleStore({
????????fields: ['id', 'name', 'desc'],
????????data: [
????????????['1', 'name1', 'desc1'],
????????????['2', 'name2', 'desc2'],
????????????['3', 'name3', 'desc3'],
????????????['4', 'name4', 'desc4'],
????????????['5', 'name5', 'desc5']
????????]
????});
????var grid = new Ext.grid.GridPanel({
????????title: 'grid',
????????viewConfig: {forceFit: true},
????????store: store,
????????columns: [
????????????{header:'id', dataIndex: 'id'},
????????????{header:'名稱', dataIndex:'name'},
????????????{header:'描述', dataIndex:'desc'}
????????],
????????bbar: new Ext.PagingToolbar({
????????????pageSize: 15,
????????????store: store
????????})
????});
????var viewport = new Ext.Viewport({
????????layout: 'fit',
????????items: [grid]
????});
});
在示例4.2中，把Viewport中的layout設置為fit，這樣Viewport就會使用FitLayout進行布局，再使用items屬性把表格添加到Viewport中。就這樣就能達到預期的效果，表格會填滿整個頁面，并且會根據(jù)頁面大小的變化而變化。
FitLayout雖然簡單，但是要注意的是，使用了FitLayout的容器里面只能放一個控件，即使放入了多個控件，也只有第一個控件會起作用。
1.3?常用布局—BorderLayout
FitLayout布局每次只能顯示一個控件，根本無法勝任復雜的布局需求，所以實際開發(fā)中用的最多的是BorderLayout布局。BorderLayout將整個布局區(qū)域分成東、西、南、北、中5個部分，除了中間部分外，其它部分都是可以省略的，因此我們可以利用它制作出更復雜、更靈活的布局。
下面使用BorderLayout實現(xiàn)一個完整的頁面布局，代碼如示例4.3所示。
示例4.3
Ext.onReady(function(){
????var viewport = new Ext.Viewport({
????????layout: 'border',
????????items: [
????????????{region:'north',html:'north'},
????????????{region:'south',html:'south'},
????????????{region:'east',html:'east'},
????????????{region:'west',html:'west'},
????????????{region:'center',html:'center'}
????????]
????});
});
示例4.3的運行效果如圖4.1.3所示。
?
圖4.1.3 BorderLayout布局
?
對BorderLayout來說，5個部分是預定義好的，根據(jù)上北、下南、左西、右東的方式進行布局。其中north和south分別位于頁面的最上方和最下方，可以分別用來做系統(tǒng)的標題欄和狀態(tài)欄；west和east分別位于頁面的左邊和右邊，是為菜單和工具條準備的；center的大小是由其它4個部分設置好以后自動計算出來的，它是唯一不可省略的部分。
注意，center是絕對不可以省略的，如果items中缺少了region: ‘center’就會報錯，會造成程序中斷，頁面上就什么也看不到了。
了解了BorderLayout的基本用法后，下面我們開始進一步學習它更深層次的功能。
1.3.1?設置子區(qū)域大小
這里所謂的子區(qū)域是指north、south、west、east這4個區(qū)域，不包括中間的center，因為中間區(qū)域的大小是通過其它部分計算得來的。
north和south只能設置高度（height），west和east只能設置寬度（width）。下面通過一個示例看看怎樣控制各個區(qū)域的大小，代碼如示例4.4所示。
示例4.4
Ext.onReady(function(){
????var?viewport =?new?Ext.Viewport({
????????layout:?'border',
????????items:?[
????????????{region:'north',html:'north',height:100},
????????????{region:'south',html:'south',height:100},
????????????{region:'east',html:'east',width:80},
????????????{region:'west',html:'west',width:80},
????????????{region:'center',html:'center'}
????????]
????});
});
在上面代碼中，我們使用height和width屬性就可以設置每個區(qū)域的大小了。如前所述，north和south只設置了高度值，寬度值由布局容器自動計算；west和east只設置了寬度值，高度值由布局容器自動計算；center區(qū)域的大小是由其它4個部分決定的，所以不能設置寬度或高度。
?
1.3.2?使用split并限制它的范圍
使用了split就運行用戶自行拖動以改變某一區(qū)域的大小。在上例基礎上在north和west區(qū)域加入split:true，完整代碼如示例4.5所示。
示例4.5
Ext.onReady(function(){
????var viewport = new Ext.Viewport({
????????layout: 'border',
????????items: [
????????????{region:'north',html:'north',height:100,split:true},
????????????{region:'south',html:'south',height:100},
????????????{region:'east',html:'east',width:80},
????????????{region:'west',html:'west',width:80,split:true},
????????????{region:'center',html:'center'}
????????]
????});
});
示例4.5的運行效果如圖4.1.5所示。從圖中可以看到north、west和center區(qū)域相交的邊界分割線變寬了，當鼠標移動到這些分割線的時候，就可以拖放改變相應區(qū)域的大小。當然，center區(qū)域的大小也會隨之改變。
使用split:true可以任由用戶改變子區(qū)域的大小，但是有時用戶的操作會導致布局變得很亂，在出現(xiàn)問題時，用戶還會認為是程序代碼在某些方面不夠嚴謹造成的，所以必須限制用戶輸入。
比如要限制左側(cè)菜單區(qū)域的大小，不允許它太窄，否則無法完整顯示菜單的內(nèi)容，也不允許它太寬，否則會導致整個布局變形。這時我們需要使用參數(shù)minSize和maxSize，使用這兩個參數(shù)就可以設置用戶拖放的范圍了，代碼如示例4.6所示。
示例4.6
Ext.onReady(function(){
????var viewport = new Ext.Viewport({
????????layout: 'border',
????????items: [
????????????{region:'north',html:'north',height:100,split:true},
????????????{region:'south',html:'south',height:100},
????????????{region:'east',html:'east',width:80},
{region:'west',html:'west',width:80,split:true,minSize:50,maxSize:150},
????????????{region:'center',html:'center'}
????????]
????});
});
上面代碼指定了west的初始寬度為80，如果用戶拖動只能在50~150之間變化，不能超出這個范圍，以此限制用戶的操作。
?
1.3.3?子區(qū)域的折疊和展開
通過配置參數(shù)collapsible:true可以讓一個區(qū)域展開和折疊。
示例4.7
Ext.onReady(function() {
var viewport = new Ext.Viewport( {
layout : 'border',
items : [ {
region : 'north',
html : 'north',
height : 100,
title:'標題',
collapsible:true
}, {
region : 'south',
html : 'south',
height : 100
}, {
region : 'east',
html : 'east',
width : 80
}, {
region : 'west',
html : 'west',
width : 80,
title:'菜單',
collapsible:true
}, {
region : 'center',
html : 'center'
} ]
});
});
在上面代碼中，主要使用配置參數(shù)collapsible:true，這個參數(shù)激活了north和west區(qū)域的折疊功能。
?
至此，BorderLayout的主要功能都已經(jīng)學習完了。只要掌握上面的內(nèi)容，大家就可以實現(xiàn)豐富而靈活的布局了。下面我們將學習另外幾種布局方式，它們與BorderLayout結(jié)合使用，從而實現(xiàn)功能更為復雜的布局樣式。
1.4?伸縮菜單布局—Accordion
Accordion用來制作伸縮菜單，如果想使用它，直接在區(qū)域中加上layout: ‘a(chǎn)ccordion’即可。
示例4.8
Ext.onReady(function()?{
?var?viewport =?new?Ext.Viewport({
????????layout:'border',
????????items:[{
???????? region:'north',
???????? title:'north',
???????? height:50
????????},{
????????????region:?'west',
????????????width:?200,
????????????layout:?'accordion',
????????????layoutConfig:?{
????????????????titleCollapse:?true,
????????????????animate:?true,
????????????????activeOnTop:?false
????????????},
????????????items:?[{
????????????????title:?'第一欄',
????????????????html:?'第一欄'
????????????},{
????????????????title:?'第二欄',
????????????????html:?'第二欄'
????????????},{
????????????????title:?'第三欄',
????????????????html:?'第三欄'
????????????}]
????????},{
????????????region:?'center',
????????????split:?true,
????????????border:?true
????????}]
????});
});
在上面代碼中，我們利用BorderLayout把整個頁面分為3部分。而在west部分，又使用了layout: ‘a(chǎn)ccordion’，把這一部分的布局方式設置為Accordion，然后使用items添加3個元素。
與Accordion布局有關(guān)的參數(shù)都寫在layoutConfig里了，這些配置參數(shù)的作用如下所示：
(1)?titleCollapse：默認為true，點擊標題就可以折疊子面板；如果設置成false，就只能通過單擊標題右邊的圖標折疊子面板。
(2)?animate：展開和折疊時是否使用動畫效果。
(3)?activeOnTop：默認為false，執(zhí)行展開和折疊后，子面板的順序不會改變。如果設置為true，展開的子面板總是放在最上面。
?
1.5?控制大小的布局—AnchorLayout
AnchorLayout提供了一種靈活的布局方式，既可以為items中每個組件指定與總體布局大小的差值，也可以設置一個比例使子組件可以根據(jù)整體自行計算大小。
示例4.9
Ext.onReady(function() {
??var viewport = new Ext.Viewport({
????????layout:'anchor',
????????items:[{
????????????title: 'panel 1',
????????????html: 'panel 1',
????????????anchor: '50% 50%'
????????},{
????????????title: 'panel 2',
????????????html: 'panel 2',
????????????anchor: '80%'
????????}]
????});
});
以上代碼中，為panel1設置了一個anchor參數(shù)，參數(shù)值是一個字符串，該字符串的值是兩個用空格分割的百分數(shù)，這兩個百分數(shù)分別代表了容器中子控件所占的寬度和高度。panel2與之類似，只是anchor參數(shù)值只有一個百分數(shù)，這樣配置的結(jié)果是寬度占整體的80%，而高度為自動。
?
1.6?分列式布局—ColumnLayout
使用ColumnLayout可以對頁面進行分列式布局。先看一個簡單的示例，代碼如示例4.10所示。
示例4.10
Ext.onReady(function() {
?var viewport = new Ext.Viewport({
????????layout:'column',
????????items: [{
????????????title: 'Column 1',
????????????height:100,
????????????columnWidth: .25
????????},{
????????????title: 'Column 2',
?? height:100,
????????????columnWidth: .4
????????},{
????????????title: 'Column 3',
????????????height:100,
????????????columnWidth: .35
????????}]
????});
});
以上代碼中，首先使用layout: ‘column’設置Viewport的布局為ColumnLayout，然后通過設置items里的每個子組件的columnWidth參數(shù)值，它是0~1之間的一個小數(shù)，表示每個組件在整體中所占的百分比。它們的總和應該等于1，否則頁面會出現(xiàn)沒有填滿的情況。?
有時我們希望某一列的寬度保持不變，當頁面大小發(fā)生改變時，只讓其它列發(fā)生改變。在ColumnLayout中可以單獨為這一列設置確定寬度，其它列再使用columnWidth來分剩下的寬度，代碼如示例4.11所示。
示例4.11
Ext.onReady(function() {
?var viewport = new Ext.Viewport({
????????layout:'column',
????????items: [{
????????????title: 'Column 1',
????????????height:100,
????????????width: 100
????????},{
????????????title: 'Column 2',
?? height:100,
????????????columnWidth: .5
????????},{
????????????title: 'Column 3',
????????????height:100,
????????????columnWidth: .5
????????}]
????});
});
以上代碼中，Column1的寬度固定為100，Column2和Column3平分剩下的部分。以后無論頁面如何變化，Column1的寬度都不會改變，Column2和Column3會根據(jù)頁面的大小改變而改變。
1.7?表格布局—TableLayout
TableLayout布局允許你非常容易地渲染內(nèi)容到HTML表格中，使用它可以創(chuàng)建出復雜的表格布局，可以指定列數(shù)（columns），跨行（rowspan），跨列（colspan）。下面示例4.12是一個表格布局的示例。
示例4.12
Ext.onReady(function()?{
var?panel =?new?Ext.Panel(?{
id :?'main-panel',
renderTo :?Ext.getBody(),
layout :?'table',
layoutConfig :?{
columns :?3??//設置表格布局默認列數(shù)是3
},
defaults :?{
frame :?true,
width :?200,
height :?200
},
items :?[ {
title :?'Item 1'
},?{
title :?'Item 2'
},?{
title :?'Item 3'
},?{
title :?'Item 4',
width :?410,
colspan :?2
},?{
title :?'Item 5'
}?]
});
});
在示例4.12中，使用layout: ‘table’設置了panel的布局方式為表格布局，然后使用layoutConfig設置了表格默認列數(shù)是3，而Item4中使用colspan設置了它獨占兩列。
1.8?Box盒布局
Box盒布局又分為HBoxLayout（水平盒布局）和VBoxLayout（垂直盒布局）兩種，使用它可以非常方便的實現(xiàn)一行或一列中排列多個組件的效果。下面通過示例4.13顏色HBoxLayout的使用。
示例4.13
Ext.onReady(function() {
var panel = new Ext.Panel( {
title : 'HBox',
width : 400,
height : 200,
renderTo : Ext.getBody(),
layout : {
type : 'hbox',
padding : '5',
align : 'stretch'
},
defaults : {
margins : '0 0 5 0'
},
items : [ {
xtype : 'button',
text : 'Button 1',
flex : 1
}, {
xtype : 'button',
text : 'Button 2',
flex : 1
}, {
xtype : 'button',
text : 'Button 3',
flex : 1
}, {
xtype : 'button',
text : 'Button 4',
flex : 3
} ]
});
});
在以上代碼中，與布局有關(guān)的配置放在layout屬性中，使用type: ‘hbox’指定當前Panel使用HBoxLayout，可以為其中每個組件設置flex屬性，flex屬性值越大，對應的組件就會占據(jù)越大空間。HBoxLayout還支持使用align屬性對布局中的組件設置統(tǒng)一的對齊方式，如上例中將align屬性設置為stretch，此時Panel中組件的高度都自動拉伸以填充外部容器。示例4.13的運行效果如圖4.1.11所示。
?
圖4.1.11 HBoxLayout布局
VBoxLayout與HBoxLayout用法類似，這里就不再詳述，大家可以自行學習。
1.9?使用嵌套實現(xiàn)復雜布局
上面學習了多種布局，這些布局如果單獨使用不能設計出復雜的界面，如果想實現(xiàn)復雜的布局就必須使用布局嵌套，下面是一個嵌套布局的示例。
示例4.14
Ext.onReady(function()?{
var?viewport =?new?Ext.Viewport(?{
layout :?'border',
items :?[ new?Ext.BoxComponent(?{
region :?'north',
height :?32,
autoEl :?{
tag :?'div',
html :?'<p>頂部標題</p>'
}
}),?{
region :?'south',
html :?'底部狀態(tài)欄',
split :?true,
height :?100,
minSize :?100,
maxSize :?200,
collapsible :?true,
title :?'South',
margins :?'0 0 0 0'
},?{
region :?'west',
id :?'west-panel',
title :?'West',
split :?true,
width :?200,
minSize :?175,
maxSize :?400,
collapsible :?true,
margins :?'0 0 0 5',
layout :?{
type :?'accordion',
animate :?true
},
items :?[ {
html :?'第一欄',
title :?'第一欄',
border :?false
},?{
title :?'第二欄',
html :?'<p>第二欄</p>',
border :?false
}?]
},?{
region :?'east',
title :?'East Side',
collapsible :?true,
split :?true,
width :?225,?
minSize :?175,
maxSize :?400,
layout:'fit',
items:[{
html:'我會填滿父容器'
}]
},new?Ext.TabPanel(?{
region :?'center',
activeTab :?0,
items :?[ {
html :?'歡迎使用本系統(tǒng)',
title :?'歡迎頁面',
closable :?true,
autoScroll :?true
},?{
html :?'center2',
title :?'Center Panel',
autoScroll :?true
}?]
})?]
});
});
上面代碼中，首先設置Viewport的布局為BorderLayout，然后對各個子組件再使用不同的布局方式?
?
本章總結(jié)
??ExtJS提供了多種布局方式實現(xiàn)頁面布局，ExtJS常用的布局都在Ext.layout下，常見的布局有：
n?最簡單布局—FitLayout
n?常用布局—BorderLayout
n?伸縮菜單布局—Accordion
n?控制大小的布局—AnchorLayout
n?分列式布局—ColumnLayout
n?表格布局—TableLayout
n?Box盒布局
??布局是可以嵌套的，使用布局嵌套能實現(xiàn)復雜的頁面布局。 ?
?
任務實訓部分
1：應用Ext布局
訓練技能點
??使用 Ext 進行布局
需求說明
（1）?使用Ext布局，將窗口分為上、下、左、右及中間5個部分。
（2）?劃分窗口布局的運行效果如圖4.2.1所示。
?
圖4.2.1 Ext窗口布局
（3）?隱藏左右側(cè)窗口，效果如圖4.2.2所示。
?
圖4.2.2 隱藏左右側(cè)窗口布局
實現(xiàn)步驟
（1）?使用Viewport作為布局容器，指定布局方式為border。
（2）?使用items屬性向容器中添加各個子窗口。
?
參考代碼
<html>
??<head>
??<title>ExtJS</title>
??<meta http-equiv="content-type" content="text/html; charset=UTF-8">
??<link rel="stylesheet" href="extjs/resources/css/ext-all.css" type="text/css"></link>
??<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
??<script type="text/javascript" src="extjs/ext-all.js"></script>
??<script type="text/javascript">
Ext.onReady(function(){
???var viewport=new Ext.Viewport({
layout:'border',
items:[{
title:'north',
region:'north',
html:'north',
split:true,
border:true,
collapsible:true,
height:50,
minSize:50,
maxSize:120
},{
title:'south',
region:'south',
html:'south',
split:true,
border:true,
collapsible:true,
height:50,
minSize:50,
maxSize:120
},{
title:'east',
region:'east',
html:'east',
split:true,
border:true,
collapsible:true,
width:120,
minSize:120,
maxSize:200
},{
title:'west',
region:'west',
html:'west',
split:true,
border:true,
collapsible:true,
width:120,
minSize:120,
maxSize:200
},{
title:'center',
region:'center',
html:'center',
split:true,
border:true,
collapsible:true
}]
});
});
??</script>
??</head>
??<body>
??</body>
</html>
2：應用Ext布局和Grid控件
訓練技能點
??向BorderLayout布局中添加Grid控件
需求說明
在上一個任務布局的中間主體部分添加Grid表格?
實現(xiàn)步驟
（1）?實現(xiàn)任務1的布局。
（2）?在中間區(qū)域加入Grid。
參考代碼
在任務1布局的主體部分添加表格：
Ext.onReady(function(){
var?sm=new?Ext.grid.CheckboxSelectionModel();
var?cm=new?Ext.grid.ColumnModel([
new?Ext.grid.RowNumberer(),
sm,
{header:'編號',dataIndex:'empId',sortable:true},
{header:'姓名',dataIndex:'userName',sortable:true},
{header:'性別',dataIndex:'sex',sortable:true},
{header:'出生日期',dataIndex:'birthday',sortable:true,
renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
{header:'地址',dataIndex:'address',sortable:true},
{header:'備注',dataIndex:'remark',sortable:true}
]);
var?data=[
['0001','故天樂','boy','1-2-2011','建設路','0001remark'],
['0002','周杰倫','boy','1-2-2011','人民路','0002remark'],
['0003','林志玲','girl','1-2-2011','大致路','0003remark'],
['0004','蔡依林','girl','1-2-2011','湖邊路','0004remark']
?? ];
var?store=new?Ext.data.Store({
proxy:new?Ext.data.MemoryProxy(data),
reader:new?Ext.data.ArrayReader({},[
{name:'empId'},
{name:'userName'},
{name:'sex'},
{name:'birthday'},
{name:'address'},
{name:'remark'},
])
});
store.load();
var?grid =?new?Ext.grid.GridPanel({
title:'操作用戶',
region:'center',
store:store,
cm:cm,
sm:sm,
viewConfig:{forceFit:true}
})?;
???var?viewport=new?Ext.Viewport({
layout:'border',
items:[{
title:'north',
region:'north',
html:'north',
split:true,
border:true,
collapsible:true,
height:50,
minSize:50,
maxSize:120
},{
title:'south',
region:'south',
html:'south',
split:true,
border:true,
collapsible:true,
height:50,
minSize:50,
maxSize:120
},{
title:'east',
region:'east',
html:'east',
split:true,
border:true,
collapsible:true,
width:120,
minSize:120,
maxSize:200
},{
title:'west',
region:'west',
html:'west',
split:true,
border:true,
collapsible:true,
width:120,
minSize:120,
maxSize:200
},grid]
});
});
3：應用復雜Form布局
訓練技能點
??Form布局
??多種布局綜合應用
需求說明
實現(xiàn)如圖4.2.4所示復雜Form布局。
?
圖4.2.4 復雜Form布局
實現(xiàn)步驟
(1)?使用FormPanel作為布局容器
(2)?在容器中使用其它布局加入其它控件
參考代碼如下所示：
Ext.onReady(function(){
???var?top =?new?Ext.FormPanel({
????????labelAlign:?'top',
????????frame:true,
????????title:?'用戶注冊',
????????bodyStyle:'padding:5px 5px 0',
????????width:?600,
????????items:?[{
????????????layout:'column',
????????????items:[{
????????????????columnWidth:.5,
????????????????layout:?'form',
????????????????items:?[{
????????????????????xtype:'textfield',
????????????????????fieldLabel:?'賬號',
????????????????????name:?'first',
????????????????????anchor:'95%'
????????????????},?{
????????????????????xtype:'textfield',
????????????????????fieldLabel:?'公司',
????????????????????name:?'company',
????????????????????anchor:'95%'
????????????????}]
????????????},{
????????????????columnWidth:.5,
????????????????layout:?'form',
????????????????items:?[{
????????????????????xtype:'textfield',
????????????????????fieldLabel:?'真實姓名',
????????????????????name:?'realName',
????????????????????anchor:'95%'
????????????????},{
????????????????????xtype:'textfield',
????????????????????fieldLabel:?'電子郵件',
????????????????????name:?'email',
????????????????????vtype:'email',
????????????????????anchor:'95%'
????????????????}]
????????????}]
????????},{
????????????xtype:'htmleditor',
????????????id:'bio',
????????????fieldLabel:'工作簡歷',
????????????height:200,
????????????anchor:'98%'
????????}],
????????buttons:?[{
????????????text:?'提交'
????????},{
????????????text:?'取消'
????????}]
????});
????top.render(document.body);
});
4：實現(xiàn)點擊樹形菜單后向主區(qū)域添加組件
訓練技能點
??Tree控件事件處理
??向TabPanel容器中添加組件
需求說明
在常見的管理系統(tǒng)布局中，當點擊左邊樹形菜單后，就會有不同的內(nèi)容顯示到右邊主區(qū)域中。
?
圖4.2.5 系統(tǒng)首頁
?
圖4.2.6 點擊操作用戶后界面
?
實現(xiàn)步驟
(1)?首先使用BorderLayout對頁面進行整體布局
(2)?處理樹控件事件
(3)?根據(jù)點擊的樹節(jié)點，向中間區(qū)域加入對應組件
參考代碼如下所示：
Ext.onReady(function(){
var?sm=new?Ext.grid.CheckboxSelectionModel();
var?cm=new?Ext.grid.ColumnModel([
new?Ext.grid.RowNumberer(),
sm,
{header:'編號',dataIndex:'empId',sortable:true},
{header:'姓名',dataIndex:'userName',sortable:true},
{header:'性別',dataIndex:'sex',sortable:true},
{header:'出生日期',dataIndex:'birthday',sortable:true,
renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
{header:'地址',dataIndex:'address',sortable:true},
{header:'備注',dataIndex:'remark',sortable:true}
]);
var?data=[
['0001','故天樂','boy','1-2-2011','建設路','0001remark'],
['0002','周杰倫','boy','1-2-2011','人民路','0002remark'],
['0003','林志玲','girl','1-2-2011','大致路','0003remark'],
['0004','蔡依林','girl','1-2-2011','湖邊路','0004remark']
?? ];
var?store=new?Ext.data.Store({
proxy:new?Ext.data.MemoryProxy(data),
reader:new?Ext.data.ArrayReader({},[
{name:'empId'},
{name:'userName'},
{name:'sex'},
{name:'birthday'},
{name:'address'},
{name:'remark'},
])
});
store.load();
var?grid =?new?Ext.grid.GridPanel({
id:'usergrid',
title:'操作用戶',
store:store,
cm:cm,
sm:sm,
viewConfig:{forceFit:true}
})?;
var?tree =?new?Ext.tree.TreePanel(?{
collapsible :?true,
title :?'管理菜單',
width :?200,
border:false,
autoScroll :?true,
split :?true,
loader :?new?Ext.tree.TreeLoader(),
root :?new?Ext.tree.AsyncTreeNode(?{
text :?'系統(tǒng)管理',
expanded :?true,
icon :?'img/13.png',
children :?[ {
text :?'用戶管理',
icon :?'img/users.png',
children :?[ {
id:'userinfo',
text :?'操作用戶',
icon :?'img/user.png',
leaf :?true
},?{
id:'userright',
text :?'用戶權(quán)限',
icon :?'img/usericon.png',
leaf :?true
}?]
},?{
text :?'客戶管理',
icon :?'img/60.png',
children :?[ {
text :?'客戶維護',
icon :?'img/61.png',
leaf :?true
},?{
text :?'客戶關(guān)系',
icon :?'img/62.png',
leaf :?true
}?]
}?]
}),
listeners:{
click:function(n){
if(n.leaf){
var?nid =?n.id;
if(nid ==?'userinfo'){
var?usergrid =?tabs.get('usergrid');
if(!usergrid){
tabs.add(grid);
}
tabs.setActiveTab(grid);
}else?if(nid ==?'userright'){
var?userrightPanel =?tabs.get('userrightPanel');
if(!userrightPanel){
userrightPanel =?new?Ext.Panel({
id:'userrightPanel',
title:'用戶權(quán)限'
});
tabs.add(userrightPanel);
}
tabs.setActiveTab(userrightPanel);
}
}
}
}
});
var?tabs =?new?Ext.TabPanel({
region:'center',
items:[{
title:'首頁',
autoHeight:true,
html:"歡迎使用本系統(tǒng)！以下是你需要處理的任務！<br/>你有<a href=#>30</a>封新郵件<br/>"
}]
});
tabs.setActiveTab(0);
???var?viewport=new?Ext.Viewport({
layout:'border',
items:[{
title:'north',
region:'north',
html:'north',
split:true,
border:true,
collapsible:true,
height:50,
minSize:50,
maxSize:120
},{
title:'south',
region:'south',
html:'south',
split:true,
border:true,
collapsible:true,
height:50,
minSize:50,
maxSize:120
},{
title:'east',
region:'east',
html:'east',
split:true,
border:true,
collapsible:true,
width:120,
minSize:120,
maxSize:200
},{
region:'west',
split:true,
border:true,
collapsible:true,
width:180,
minSize:120,
maxSize:200,
items:tree
},tabs]
});
});
?
?
?
鞏固練習
一、選擇題
1.?使用了FitLayout的容器里面能添加（ ）個控件。
A.?1個
B.?2個
C.?3個
D.?不限制
2.?BorderLayout使用（ ）屬性設置子控件在容器中的方位。
A.?items
B.?title
C.?region
D.?border
3.?BorderLayout必須包含（ ）區(qū)域。
A.?north
B.?west
C.?east
D.?center
4.?AnchorLayout中使用（ ）屬性設置子控件所占的大小。
A.?width
B.?height
C.?anchor
D.?border
5.?ColumnLayout中使用（ ）屬性設置子控件所占的寬度。
A.?columnWidth
B.?width
C.?itemWidth
D.?autoWidth
總結(jié)
