通過此文能學習到如下內容
1.創(chuàng)建一個簡單的面板 Ext.Panel
2.制作一個可以拖動的面板 Ext.Panel
3 .使用選項卡面板
3.使用Ext.Viewport搭一個簡單布局(用一個小例子來總結本文所有內容)
面板是ExtJs控件的基礎，很多控件都是在面板的基礎上擴展的，或者他會與其他控件之間有關系。
面板由一個工具欄、一個底部工具欄、面板頭部、面板尾部和面板主區(qū)域幾個部分組成。面本類中還提供了面板展開、關閉等功能。并提供了一些可重用的工具按鈕讓我們靈活的控制面板。面板可以放入其他任何容器中，面板本身也是一個容器，所以面板里面也可以包含其他組件。面板的類名為Ext.Panel,其xtype為panel。
看下面一個例子來顯示出面板的各個組成部分：
//普通的面板
function panel(){
var panel=new Ext.Panel({
renderTo:'panel',
title:'面板的頭部',
width:400,
height:200,
html:'<h1>面板的主顯示區(qū)域..可包含任何html代碼</h1>',
tbar:[{text:'頂部工具欄按鈕'}],
bbar:[{text:'底部工具欄'}],
buttons:[
{
text:'面板底部按鈕',
handler:function()
{
Ext.Msg.alert('提示','面板底部按鈕的事件！');
}
}
]
});
}
上面的代碼就不做詳細介紹了，特別注意的一點是renderTo:'panel'，這句代碼負責把面板綁定到一個div層里，panel就是div的ID。
<div id="panel"></div>
代碼執(zhí)行后會顯示下面的效果：

效果不錯吧！面板中可以有多個工具欄，可以位于面板的頂部或底部，Ext工具欄是由Ext.Toolbar類表示。工具欄可以存放按鈕、文本等內容。而且面板中還提了一些實用的工具欄，可以通過tools配置屬性向面板頭部加入工具欄選項，看下面的案例：
function panel(){
var panel=new Ext.Panel({
tools:[
{id:"save"},
{id:"help"},
{id:"up"},
{
id:"close",
handler:function(){
Ext.MessageBox.alert("工具欄按鈕","工具欄的關閉按鈕事件")
}
}
],
renderTo:'panel',
title:'面板的頭部',
width:400,
height:200,
html:'<h1>面板的主顯示區(qū)域..可包含任何html代碼</h1>',
tbar:[{text:'頂部工具欄按鈕'}],
bbar:[{text:'底部工具欄'}],
buttons:[
{
text:'面板底部按鈕',
handler:function()
{
Ext.Msg.alert('提示','面板底部按鈕的事件！');
}
}
]
});
}

最新評論