ExtJs 學(xué)習(xí)筆記 Ext.Panle Ext.TabPanel Ext.Viewport第2/3頁
更新時間:2008年12月29日 23:12:23 作者:
ExtJs 學(xué)習(xí)筆記基礎(chǔ)篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)

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

這樣就可以拖動了,但是會發(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的坐標(biāo)
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中常見的配置屬性、方法,下面內(nèi)容是資料中的:
1.autoLoad:有效的url字符串,把那個url中的body中的數(shù)據(jù)加載顯示,但是可能沒有樣式和js控制,只是html數(shù)據(jù)
2.autoScroll:設(shè)為true則內(nèi)容溢出的時候產(chǎn)生滾動條,默認為false
3.autoShow:設(shè)為true顯示設(shè)為"x-hidden"的元素,很有必要,默認為false
4.bbar:底部條,顯示在主體內(nèi),//代碼:bbar:[{text:'底部工具欄bottomToolbar'}],
5.tbar:頂部條,顯示在主體內(nèi),//代碼:tbar:[{text:'頂部工具欄topToolbar'}],
6.buttons:按鈕集合,自動添加到footer中(footer參數(shù),顯示在主體外)//代碼:buttons:[{text:"按鈕位于footer"}]
7.buttonAlign:footer中按鈕的位置,枚舉值為:"left","right","center",默認為right
8.collapsible:設(shè)為true,顯示右上角的收縮按鈕,默認為false
9.draggable:true則可拖動,但需要你提供操作過程,默認為false
10.html:主體的內(nèi)容
11.id:id值,通過id可以找到這個組件,建議一般加上這個id值
12.width:寬度
13.height:高度
13.title:標(biāo)題
14.titleCollapse:設(shè)為true,則點擊標(biāo)題欄的任何地方都能收縮,默認為false.
15.applyTo:(id)呈現(xiàn)在哪個html元素里面
16.contentEl:(id)呈現(xiàn)哪個html元素里面,把el內(nèi)的內(nèi)容呈現(xiàn)
17.renderTo:(id)呈現(xiàn)在哪個html元素里面
applyTo、contentEl、renderTo三者區(qū)別個人理解為:applyTo和RenderTo綁定到html元素中,contentEl則是html元素到ext組件中去。
上面說到面板都是綁定在某個html元素中顯示面板,是局部的。Extjs中還有一個可以顯示在整個body中的組件Ext.ViewPort,它會隨著瀏覽器而變化。要注意的是一個頁面中只能存在一個viewport的實例??聪旅娴拇a
function viewport(){
var view=new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[
{
title:'標(biāo)題',
html:"內(nèi)容",
bbar:[
{text:"按鈕1"}
]
}
]
})
}

與其它使用方式大同小異,Viewport不需要指定renderTo,Viewport通常用于網(wǎng)站主頁面,Viewport常用布局有fit、border等,設(shè)置layout屬性改變布局。
基本的面板我們了解了,還有一個很重要的面板TabPanel,這里用一個小例子做說明,代碼就不解釋了。面板的用法是非常靈活的,我們可以發(fā)揮自己的想象力來做出漂亮的選項卡面板和實用的功能。因為它是可以無限嵌套控件的。
function tabpanel(){
var tabpanel=new Ext.TabPanel({
activeTab:0, //設(shè)置默認選擇的選項卡
renderTo:'tabpanel',
width:200,
height:150,
items:[
{
title:"第一個選項",
html:"第一個的內(nèi)容"
},
{
title:"第二個選項",
html:"第一個的內(nèi)容"
}
]
});
}
您可能感興趣的文章:
- 解決PhoneGap不支持viewport的幾種方法
- 深入理解移動前端開發(fā)之viewport
- 詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法
- 關(guān)于meta viewport中target-densitydpi屬性詳解(推薦)
- 自適應(yīng)布局meta標(biāo)簽中viewport、content、width、initial-scale、minimum-scale、maximum-scale總結(jié)
- 通過viewport實現(xiàn)jsp頁面支持手機縮放
- 關(guān)于viewport,Ext.panel和Ext.form.panel的關(guān)系
- 如何基于viewport vm適配移動端頁面
相關(guān)文章
解決ExtJS在chrome或火狐中正常顯示在ie中不顯示的瀏覽器兼容問題
由于開發(fā)過程中大多用chrome來調(diào)試,很少在ie中調(diào)試(現(xiàn)在兩者都要兼顧),導(dǎo)致最后在ie中頁面不能正常加載,當(dāng)時那個囧啊,看到ie報的錯,我都想哭,連出錯的堆棧信息都沒有(這一點,ie做的真不好),無從下手啊2013-01-01ext中store.load跟store.reload的區(qū)別示例介紹
這篇文章主要介紹了ext中store.load跟store.reload的區(qū)別,需要的朋友可以參考下2014-06-06使用ExtJS技術(shù)實現(xiàn)的拖動樹結(jié)點
在本文將介紹TreePanel組件非常有意思的一個功能:結(jié)點拖放。要使TreePanel組件的結(jié)點可以拖放非常簡單,只需要將TreePanel類的enableDD選項參數(shù)設(shè)為true即可。當(dāng)然,要想實現(xiàn)更復(fù)雜的功能,還需要配合其他的參數(shù)和事件。2010-08-08Extjs 3.3切換tab隱藏相應(yīng)工具欄出現(xiàn)空白解決
在切換tabpanel的時候,把相應(yīng)的工具欄隱藏掉,結(jié)果出現(xiàn)空白,先熊板板的空白不過后來終于解決,接下來與大家分享下解決技巧,感興趣的朋友可以參考下哈2013-04-04ExtJS下 Ext.Direct加載和提交過程排錯小結(jié)
基礎(chǔ)夯實一點,會有好處的,排錯的時候就體現(xiàn)出來了,下面就Ext.Direct做一些排錯筆記與大家一一分享,感興趣的朋友可以參考下哈2013-04-04ExtJS4利根據(jù)登錄后不同的角色分配不同的樹形菜單
這篇文章主要介紹了ExtJS4利根據(jù)登錄后不同的角色分配不同的樹形菜單,需要的朋友可以參考下2014-05-05ExtJs 學(xué)習(xí)筆記基礎(chǔ)篇 Ext組件的使用
昨天剛接觸到Extjs,簡單寫了篇學(xué)習(xí)筆記,今天繼續(xù)。2008-12-12