使用過Delphi、Visual Basic或Java Swing等開發語言的讀者對面板（Panel）一定非常熟悉，我們可以在面板隨意地排版布局，它就像是一副骨架撐起了整個用戶界面，在ExtJS中面板同樣起著頁面骨架的作用，所以學習面板是學習ExtJS頁面布局的基礎和起點。 ExtJS面板從使用方式上來說更接近于Java Swing中的面板，通過為其指定不同的布局方式或者進行面板嵌套達到復雜布局的目的，因此布局方式是否豐富，能否進行嵌套，是衡量ExtJS布局靈活性的重要指標。ExtJS面板共支持10種不同風格的布局樣式，并且允許無限制的進行嵌套，這就給我們創造了一個盡情發揮的強大舞臺。
一、認識Ext.Panel
Ext.Panel擴展自Ext.Container，是各種組件的容器也是基礎類，可以擴展出功能更加強大的面板。作為標準的面板組件主要包括如下5部分：底部工具欄（bottom toolbars）、頂部工具欄（top toolbars）、面板頭部（header）、面板底部（footer）和面板體（body），下面是一個標準面板的示例，可以幫助讀者更清晰的認識面板組件。
代碼5-1：Ext.Panel示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
new Ext.Panel({
title:'面板頭部（header）',
tbar : ['頂端工具欄(top toolbars)'],
bbar : ['底端工具欄(bottom toolbars)'],
height:200,
width:300,
frame:true,
applyTo :'panel',
bodyStyle:'background-color:#FFFFFF',
html:'<div>面板體（body）</div>',
tools : [//設置面板頭部功能區
{id:'toggle'},
{id:'close'},
{id:'maximize'}
],
buttons:[
new Ext.Button({
text:'面板底部（footer）'
})
]
})
});
</script>
代碼5-1演示了標準面板的創建方式，從圖5-1中可以看到一個標準面板所具有的全部組成部分，這5部分不但位置不同功能也不盡相同，它們分別有自己存在的價值，讀者可以根據業務需要選擇使用其中合適的部分構成自己需要的頁面。效果如圖5-1所示。
二、Ext.Panel 的主要功能
上節介紹了ExtJS面板的主要表現形式，接下來將介紹面板組件的主要配置項及常用方法，這些配置項及方法將在后面的示例中用到，可以把這部分內容作為后續章節的鋪墊，進行快速的瀏覽，Ext.Panel主要配置項目如表5-1所示。
表5-1 Ext.Panel主要配置項目表表
|
配置項 |
參數類型 |
說明 |
| animCollapse |
Boolean |
設置面板折疊或展開時是否顯示動畫效果，如果 Ext.Fx 類可用則默認
為true，否則為fasle。 |
| applyTo |
Mixed |
一個頁面上已經存在的元素或元素id，組件將會追加到該元素的后面，而不是將其作為新組件的容器。 |
|
| autoDestroy |
Boolean |
設置是否自動銷毀從容器中移除的組件，默認為true，否則要手工銷毀 |
| autoHeight |
Boolean |
是否使用自動高度，true則使用自動高度，false則使用固定高度，默認為false |
| autoLoad |
Object/String/
Function |
設置面板自動加載的url地址。如果不為null則面板會嘗試加載該url
并立刻在面板中進行渲染。這個連接將變成面板的body元素，所以可以根據需要在任何時候刷新面板內容 |
| autoScroll |
Boolean |
設置是否自動顯示滾動條，true則設置面板的body元素樣式為overflow:'auto'，內容溢出時會自動顯示滾動條，false則不顯示滾動條對溢出的內容進行截斷。默認為false |
| autoShow |
Boolean |
設置是否移除組件的隱藏樣式（例如'x-hidden' or 'x-hide-display'），如果為true則在渲染時移除它們，默認為false |
| autoWidth |
Boolean |
是否使用自動寬度，true為自動寬度，false為固定寬度，默認為false |
| baseCls |
String |
應用于面板元素的基本樣式類，默認為'x-panel' |
| bbar |
Object/Array |
設置面板的底端工具欄，可以是Ext.Toolbar對象、工具欄配置對象或button配置對象的數組。 |
| bodyBorder |
Boolean |
設置是否顯示面板體（body）的內部邊框，true則顯示，false則隱藏，默認為true。并且該項只在border = true時生效 |
| bodyStyle |
String/Object/
Function |
應用于面板體（body）的自定義樣式。默認為null |
| border |
Boolean |
這是是否顯示面板體（body）的邊框，true則顯示，false則隱藏，默認為true。默認邊框寬度為2px |
| buttonAlign |
String |
設置面板底部（footer）中按鈕的對齊方式，有效值包括：'right', 'left' 和'center'，默認為'right' |
| buttons |
Array |
加入到面板底部（footer）中按鈕配置對象的數組 |
| collapseFirst |
Boolean |
設置渲染展開或收縮按鈕的順序。true則在其它按鈕渲染前先渲染展開或收縮按鈕，false則最后渲染，默認為true。該配置項決定了展開或收縮按鈕的位置。 |
| collapsed |
Boolean |
設置面板在第一次渲染時是否處于收縮狀態，true則收縮，false則展開，默認為false |
| collapsible |
Boolean |
設置是否允許面板進行展開和收縮，true則允許進行展開和收縮，并在面板頭部顯示伸縮按鈕。默認為false |
| contentEl |
String |
設置面板的內容元素，可以是頁面元素的id或已存在的HTML節點 |
| defaultType |
String |
面板中元素的默認類型，默認為'panel' |
| defaults |
Object |
應用到面板容器中所有元素的配置對象， 例如： defaults: {bodyStyle:'padding:15px'} |
| floating |
Boolean |
設置面板是否可以浮動，true則允許，默認為false。注意，設置floating為true會導致面板顯示在負偏移的位置，從而面板不可見，因為浮動狀態下面板是采用絕對定位的，位置必須在渲染之后進行明確的設置（例如myPanel.setPosition(100,100);）.，浮動面板也需要有固定的寬度 |
| footer |
Boolean |
設置是否創建面板底部（footer）元素，true則創建，false則跳過footer元素的創建，如果一個或多個按鈕被加入到footer中，則footer的設置會被忽略，而直接創建footer元素 |
| frame |
Boolean |
設置是否渲染面板，true則渲染面板為自定義的圓角邊框，false則渲染為1px的直角邊框 |
| header |
Boolean |
設置是否創建面板頭部（header）元素，true則創建，false則跳過header元素的創建，如果提供了title但沒有設置header則header會被自動創建。如果提供了title但明確設置header為false則header不會被創建 |
| headerAsText |
Boolean |
設置是否在面板的header中顯示title，true則顯示，默認為true |
| height |
Number |
面板高度，默認為auto |
| hideBorders |
Boolean |
true則隱藏面板容器中所有組件的邊框，false則根據組件的具體配置進行顯示 |
| hideCollapseTool |
Boolean |
設置當collapsible為true時，是否顯示展開或收縮按鈕 |
| html |
String/Object |
設置面板（body）元素的內容為HTML片段或DomHelper生成的內容。 |
| items |
Mixed |
單獨一個子組件或子組件的數組 |
| layout |
String |
面板的布局類型，默認Ext.layout.ContainerLayout布局，被選布局的配置項通過layoutConfig進行設置 |
| layoutConfig |
Object |
這個配置對象包含被選布局的配置項，針對每種布局的配置項需要查看相應的布局類說明 |
| maskDisabled |
Boolean |
設置當面板不能使用時是否遮罩面板，true則遮罩，默認為true |
| shadow |
Boolean/String |
設置是否在面板后面顯示陰影，true則顯示，或通過字符串指定陰影的顯示模式，有效值包括：sides、frame、drop，默認為'sides'。該項只在floating 為 true時生效 |
| shadowOffset |
Number |
設置面板陰影的偏移量，以像素為單位，默認為4。該項只在floating 為true時生效 |
| tbar |
Object/Array |
設置面板的頂端工具欄，可以是Ext.Toolbar對象、工具欄配置對象或button配置對象的數組。注意，面板渲染后只能通過getTopToolbar方法訪問該工具欄 |
| title |
String |
顯示在面板頭部的標題信息' |
| titleCollapse |
Boolean |
設置是否允許通過點擊面板頭部進行展開和收縮操作，true則允許，默認為false |
| tools |
Array |
工具按鈕配置對象的數組，這些按鈕會被添加到面板頭部功能區，在表5-2中會有詳細的說明 |
| width |
Number |
面板寬度，默認為auto |
Tools 配置項主要用來設置面板頭部功能區所要顯示的各類按鈕，每個按鈕的配置對象可能包含的配置項在表5-2中說明，tools配置項id與按鈕圖標對應關系如表5-3所示。
表5-2 tools配置項明細表
| 配置項 |
參數類型 |
說明 |
| id |
String |
必選項，可能值及效果見表5.3 |
| handler |
Function |
點擊按鈕后觸發的處理函數，參數包括： event : Ext.EventObject、toolEl : Ext.Element、Panel : Ext.Panel |
| scope |
Object |
處理函數的執行范圍 |
| qtip |
String/Object |
為按鈕指定提示信息，可以是字符串或配置對象 |
| hidden |
Boolean |
設置初次渲染時，是否隱藏 |
| on |
Object |
為按鈕配置事件監聽器。 |
表5-3 tools配置項id與按鈕圖標對應關系表
三、使用Ext.Panel
本節主要介紹常用的面板使用方法，并結合示例介紹5.1.2節中常用配置項的使用及效果，以使讀者有一個形象的認識。對于面板最重要的功能和作用就是在其中顯示各種不同來源的內容，分為4個示例分別講解4種不同的方式為面板提供顯示內容，它們分別是：
使用autoLoad配置項為面板加載遠程頁面。
使用contentEl配置項為面板加載本地資源。
使用html配置項自定義面板內容。
使用items配置項在面板中添加組件。
這4種方式可以靈活的為面板提供各種需要顯示的內容，掌握它們是掌握面板使用方式的基礎，在接下來的示例中會逐一看到它們的用法和效果。
1. 使用autoLoad配置項為面板加載遠程頁面
在本例中創建一個面板用于加載遠程頁面，示例中主要使用了 autoLoad 配置項設置要加載的遠程頁面url地址，同時展示了面板折疊和滾動條的效果，請看下面的示例代碼。
代碼5-2：使用autoLoad配置項加載遠程頁面示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
title:'面板加載遠程頁面',
height:150,//設置面板的高度
width:250,//設置面板的寬度
frame:true,//渲染面板
autoScroll :true,//自動顯示滾動條
collapsible : true,//允許展開和收縮
applyTo :'panel',
autoLoad :'page1.html',//自動加載面板體的默認連接
bodyStyle:'background-color:#FFFFFF'//設置面板體的背景色
})
});
</script>
<div id='panel'>
代碼 5-2 演示了設置面板的 autoLoad 配置項加載指定頁面的方式，從下面的截圖中可以看到，當面板初始化時自動加載了指定的page1.html頁面，并且在頁面內容超出面板大小時自動顯示滾動條。效果如圖5-2~5-4所示。
2. 使用contentEl配置項為面板加載本地資源
上例介紹了面板加載遠程頁面的方法，它是非常實用的方式，但是在有些情況下并不需要讀取一份遠程的頁面，而只是將本頁面中的已有部分展示在面板中，這就用到了contentEl配置項，它的作用就是指定在面板中所要顯示的本地資源id，看下面的示例代碼。
代碼5-3：使用contentEl配置項加載本地資源示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
title:'面板加載本地資源',
height:150, //設置面板的高度
width:250, //設置面板的寬度
frame:true, //渲染面板
collapsible : true, //允許展開和收縮
autoScroll : true, //自動顯示滾動條
autoHeight : false, //使用固定高度
//autoHeight : true, //使用自動高度
applyTo :'panel',
contentEl :'localElement', //加載本地資源
bodyStyle:'background-color:#FFFFFF' //設置面板體的背景色
})
});
</script>
<table border=1 id='localElement'>
<tr><th colspan=2>本地資源---員工列表</th></tr>
<tr>
<th width = 60>序號</th><th width = 80>姓名</th>
<tr>
<tr><td>1</td><td>張三</td></tr>
<tr><td>2</td><td>李四</td></tr>
<tr><td>3</td><td>王五</td></tr>
<tr><td>4</td><td>趙六</td></tr>
<tr><td>5</td><td>陳七</td></tr>
<tr><td>6</td><td>楊八</td></tr>
<tr><td>7</td><td>劉九</td></tr>
</table>
在代碼5-3中可以看到員工列表并沒有通過請求遠程頁面得到，而是直接將本頁面中已存在的一份table 表格作為內容展示在了面板當中，這種方式省略了遠程頁面的讀取過程，顯示速度快，適合于展示簡單的本地資源。同時在示例中還展示了自動高度與固定高度的不同效果，自動高度會根據展示內容的實際高度自動調整面板高度，所以在面板內部并沒有出現滾動條。運行效果如圖5-5和5-6所示。
3. 使用html配置項自定義面板內容
在上面2個示例中，不管是遠程頁面還是本地資源加載的都是已存在的頁面內容。接下來介紹自定義面板內容的實現方式，可以自己編寫HTML代碼來定義自己需要的展示效果，示例使用面板的html配置項，通過它就可以實現自定義面板內容的目的，看下面的示例。
代碼5-4：使用html配置項自定義面板內容示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var htmlArray = [
'<table border=1>',
'<tr><td colspan=2>員工列表</td></tr>',
'<tr><th width = 60>序號</th><th width = 80>姓名</th><tr>',
'<tr><td>1</td><td>張三</td></tr>',
'<tr><td>2</td><td>李四</td></tr>',
'<tr><td>3</td><td>王五</td></tr>',
'<tr><td>4</td><td>趙六</td></tr>',
'<tr><td>5</td><td>陳七</td></tr>',
'<tr><td>6</td><td>楊八</td></tr>',
'<tr><td>7</td><td>劉九</td></tr>',
'</table>'
];
var panel = new Ext.Panel({
title:'使用html配置項自定義面板內容',
height:150, //設置面板的高度
width:250, //設置面板的寬度
frame:true, //渲染面板
collapsible : true, //允許展開和收縮
autoScroll : true, //自動顯示滾動條
applyTo :'panel',
html: htmlArray.join(''),
bodyStyle:'background-color:#FFFFFF' //設置面板體的背景色
})
});
</script>
圖5-7與圖5-5中展示的頁面效果完全相同，但是它們卻使用了完全不同的產生方式，html 配置項給了我們動態組織面板內容的途徑，在代碼 5-7 中首先創建了字符串數組htmlArray，然后通過調用數組的 join 方法將數組內容連接為整體供程序使用，讀者也可以使用“+”進行字符串連接，這兩種連接方式對程序的執行并沒有任何影響。
4. 使用items配置項在面板中添加組件
在學習完前面3種為面板添加內容的方式之后，再介紹通過items配置項為面板添加組件的方式，這也是最重要和常用的面板功能之一。通過使用items配置項不但可以向面板中添加組件，還可以實現面板的多層嵌套，由于items既可以接受單個對象也可以接受數組為參數，所以將分2個示例分別講解。
向面板中添加單一組件
在代碼5-5中將創建一個只包含日期選擇組件的面板。
代碼5-5：使用items配置項添加單一組件示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
header :true,
title:'日歷',
frame:true, //渲染面板
collapsible : true, //允許展開和收縮
autoHeight : true, //自動高度
width : 189, //固定寬度
applyTo :'panel',
items: new Ext.DatePicker() //向面板中添加一個日期組件
})
});
</script>
代碼5-5演示了向面板添加單一組件的方法，其中items配置項是向面板中添加組件的主要方式，在代碼5-6中會演示向面板中添加多個組件的方法。運行效果如圖5-8所示。
圖5-8 通過items配置項向面板中添加一個組件
向面板中添加多個組件
可以向面板中添加普通組件，也可以向面板中添加子面板，因為面板（Ext.Panel）本身也是組件，因此面板本身可以通過items配置項添加到父面板中，這樣就形成了多層面板嵌套的效果，這也是進行復雜頁面布局的基礎。下面是向面板添加多個組件的簡單示例。
代碼5-6：使用items配置項添加多個組件示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
var panel = new Ext.Panel({
header :true,
title:'使用items進行面板嵌套',
frame:true, //渲染面板
collapsible : true, //允許展開和收縮
height : 200,
width : 250,
applyTo :'panel',
defaults : { //設置默認屬性
bodyStyle:'background-color:#FFFFFF', //設置面板體的背景色
height : 80, //子面板高度為80
collapsible : true, //允許展開和收縮
autoScroll : true //自動顯示滾動條
},
items: [
new Ext.Panel({
title : '嵌套面板一',
contentEl : 'localElement' //加載本地資源
}),
new Ext.Panel({
title : '嵌套面板二',
autoLoad : 'page1.html' //加載遠程頁面
})
]
})
});
</script>
<table border=1 id='localElement'>
<tr><th colspan=2>本地資源---員工列表</th></tr>
<tr>
<th width = 60>序號</th><th width = 80>姓名</th>
<tr>
<tr><td>1</td><td>張三</td></tr>
<tr><td>2</td><td>李四</td></tr>
<tr><td>3</td><td>王五</td></tr>
</table>
代碼 5-6 演示了向面板中添加多個組件的方法，items 配置項接受組件數組為參數依次
將組件添加到面板當中。效果如圖5-9和5-10所示。
