通過(guò)此文能學(xué)習(xí)到如下內(nèi)容
1.創(chuàng)建一個(gè)簡(jiǎn)單的面板 Ext.Panel
2.制作一個(gè)可以拖動(dòng)的面板 Ext.Panel
3 .使用選項(xiàng)卡面板
3.使用Ext.Viewport搭一個(gè)簡(jiǎn)單布局(用一個(gè)小例子來(lái)總結(jié)本文所有內(nèi)容)
面板是ExtJs控件的基礎(chǔ)，很多控件都是在面板的基礎(chǔ)上擴(kuò)展的，或者他會(huì)與其他控件之間有關(guān)系。
面板由一個(gè)工具欄、一個(gè)底部工具欄、面板頭部、面板尾部和面板主區(qū)域幾個(gè)部分組成。面本類中還提供了面板展開(kāi)、關(guān)閉等功能。并提供了一些可重用的工具按鈕讓我們靈活的控制面板。面板可以放入其他任何容器中，面板本身也是一個(gè)容器，所以面板里面也可以包含其他組件。面板的類名為Ext.Panel,其xtype為panel。
看下面一個(gè)例子來(lái)顯示出面板的各個(gè)組成部分：
//普通的面板
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('提示','面板底部按鈕的事件！');
}
}
]
});
}
上面的代碼就不做詳細(xì)介紹了，特別注意的一點(diǎn)是renderTo:'panel'，這句代碼負(fù)責(zé)把面板綁定到一個(gè)div層里，panel就是div的ID。
<div id="panel"></div>
代碼執(zhí)行后會(huì)顯示下面的效果：

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

最新評(píng)論