跟普通的面板沒什么區(qū)別，只是多了個tools配置屬性，可以通過ID來設置工具欄選項種類，如果需要給工具欄選項添加事件，則直接配置handler屬性就可以。下面我為大家貼了一些id的枚舉值：
toggle (collapsable為true時的默認值)
close
minimize
maximize
restore
gear
pin
unpin
right
left
up
down
refresh
minus
plus
help
search
save
print
上面的東西我也沒有全部測試，如果大家感興趣就自己試一下吧。
如果我們需要讓這個面板可以拖動，需要加3個配置屬性，改變一處配置。
x:88,
y: 88,
renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置
draggable: {
insertProxy: false,//拖動時不虛線顯示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//獲取拖動時panel的坐標
var s = this.panel.getEl().shadow;
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);//移動到最終位置
}
}
x與y是設置在屏幕顯示位置，renderTo不需要指定div的id了，直接用Ext.getBody()方法就可以把Panel加載。
draggable是拖動時設置，onDrag是在拖動時觸發(fā)的事件，endDrag是結束拖動時事件。
效果:

這樣就可以拖動了，但是會發(fā)現(xiàn)在拖動時有一個黑框框，這樣可能有些不美觀了。如果我們需要讓這個黑框隨著移動位置而變化。那么我們需要在onDrag事件函數(shù)中加如下代碼:
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
看看拖動例子的全部代碼：
//可以拖動的面板
function panelDrag(){
var panel=new Ext.Panel({
title: '拖一下看看我動不.',
x:88,
y: 88,
renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置
floating: true,//true
frame: true,//圓角邊框
width: 400,
height: 200,
draggable: {
insertProxy: false,//拖動時不虛線顯示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//獲取拖動時panel的坐標
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);//移動到最終位置
}
}
})
}
Ext.Panel有幾個子類，所以來介紹一下Panel中常見的配置屬性、方法，下面內容是資料中的：
1.autoLoad：有效的url字符串，把那個url中的body中的數(shù)據(jù)加載顯示，但是可能沒有樣式和js控制，只是html數(shù)據(jù)
2.autoScroll:設為true則內容溢出的時候產(chǎn)生滾動條，默認為false
3.autoShow:設為true顯示設為"x-hidden"的元素，很有必要，默認為false
4.bbar:底部條，顯示在主體內，//代碼：bbar:[{text:'底部工具欄bottomToolbar'}],
5.tbar:頂部條，顯示在主體內，//代碼:tbar:[{text:'頂部工具欄topToolbar'}],
6.buttons:按鈕集合，自動添加到footer中（footer參數(shù)，顯示在主體外）//代碼：buttons:[{text:"按鈕位于footer"}]
7.buttonAlign:footer中按鈕的位置，枚舉值為："left","right","center",默認為right
8.collapsible：設為true，顯示右上角的收縮按鈕，默認為false
9.draggable:true則可拖動，但需要你提供操作過程，默認為false
10.html:主體的內容
11.id：id值，通過id可以找到這個組件，建議一般加上這個id值
12.width：寬度
13.height：高度
13.title:標題
14.titleCollapse：設為true，則點擊標題欄的任何地方都能收縮，默認為false.
15.applyTo：（id）呈現(xiàn)在哪個html元素里面
16.contentEl：（id）呈現(xiàn)哪個html元素里面，把el內的內容呈現(xiàn)
17.renderTo：（id）呈現(xiàn)在哪個html元素里面
applyTo、contentEl、renderTo三者區(qū)別個人理解為：applyTo和RenderTo綁定到html元素中，contentEl則是html元素到ext組件中去。
上面說到面板都是綁定在某個html元素中顯示面板，是局部的。Extjs中還有一個可以顯示在整個body中的組件Ext.ViewPort，它會隨著瀏覽器而變化。要注意的是一個頁面中只能存在一個viewport的實例。看下面的代碼
function viewport(){
var view=new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[
{
title:'標題',
html:"內容",
bbar:[
{text:"按鈕1"}
]
}
]
})
}

與其它使用方式大同小異，Viewport不需要指定renderTo，Viewport通常用于網(wǎng)站主頁面，Viewport常用布局有fit、border等，設置layout屬性改變布局。
基本的面板我們了解了，還有一個很重要的面板TabPanel，這里用一個小例子做說明，代碼就不解釋了。面板的用法是非常靈活的，我們可以發(fā)揮自己的想象力來做出漂亮的選項卡面板和實用的功能。因為它是可以無限嵌套控件的。

function tabpanel(){
var tabpanel=new Ext.TabPanel({
activeTab:0, //設置默認選擇的選項卡
renderTo:'tabpanel',
width:200,
height:150,
items:[
{
title:"第一個選項",
html:"第一個的內容"
},
{
title:"第二個選項",
html:"第一個的內容"
}
]
});
}

最新評論