|
聲明：本文案例講解摘自資料，部分資料收集自他人博客。 通過(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('提示','面板底部按鈕的事件！'); } } ] });}
<div id="panel"></div>效果不錯(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('提示','面板底部按鈕的事件！'); } } ] });}
跟普通的面板沒(méi)什么區(qū)別，只是多了個(gè)tools配置屬性，可以通過(guò)ID來(lái)設(shè)置工具欄選項(xiàng)種類，如果需要給工具欄選項(xiàng)添加事件，則直接配置handler屬性就可以。下面我為大家貼了一些id的枚舉值： toggle (collapsable為true時(shí)的默認(rèn)值)closeminimizemaximizerestoregearpinunpinrightleftupdownrefreshminusplushelpsearchsaveprint
如果我們需要讓這個(gè)面板可以拖動(dòng)，需要加3個(gè)配置屬性，改變一處配置。 x:88,y: 88,renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置draggable: { insertProxy: false,//拖動(dòng)時(shí)不虛線顯示原始位置 onDrag : function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true);//獲取拖動(dòng)時(shí)panel的坐標(biāo) var s = this.panel.getEl().shadow; }, endDrag : function(e){ this.panel.setPosition(this.x, this.y);//移動(dòng)到最終位置 }}
draggable是拖動(dòng)時(shí)設(shè)置，onDrag是在拖動(dòng)時(shí)觸發(fā)的事件，endDrag是結(jié)束拖動(dòng)時(shí)事件。 效果: 這樣就可以拖動(dòng)了，但是會(huì)發(fā)現(xiàn)在拖動(dòng)時(shí)有一個(gè)黑框框，這樣可能有些不美觀了。如果我們需要讓這個(gè)黑框隨著移動(dòng)位置而變化。那么我們需要在onDrag事件函數(shù)中加如下代碼: if (s) { s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());}//可以拖動(dòng)的面板function panelDrag(){ var panel=new Ext.Panel({ title: '拖一下看看我動(dòng)不.', 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,//拖動(dòng)時(shí)不虛線顯示原始位置 onDrag : function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true);//獲取拖動(dòng)時(shí)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);//移動(dòng)到最終位置 } } })}
Ext.Panel有幾個(gè)子類，所以來(lái)介紹一下Panel中常見(jiàn)的配置屬性、方法，下面內(nèi)容是資料中的： 1.autoLoad：有效的url字符串，把那個(gè)url中的body中的數(shù)據(jù)加載顯示，但是可能沒(méi)有樣式和js控制，只是html數(shù)據(jù)2.autoScroll:設(shè)為true則內(nèi)容溢出的時(shí)候產(chǎn)生滾動(dòng)條，默認(rèn)為false3.autoShow:設(shè)為true顯示設(shè)為"x-hidden"的元素，很有必要，默認(rèn)為false4.bbar:底部條，顯示在主體內(nèi)，//代碼：bbar:[{text:'底部工具欄bottomToolbar'}],5.tbar:頂部條，顯示在主體內(nèi)，//代碼:tbar:[{text:'頂部工具欄topToolbar'}],6.buttons:按鈕集合，自動(dòng)添加到footer中（footer參數(shù)，顯示在主體外）//代碼：buttons:[{text:"按鈕位于footer"}]7.buttonAlign:footer中按鈕的位置，枚舉值為："left","right","center",默認(rèn)為right8.collapsible：設(shè)為true，顯示右上角的收縮按鈕，默認(rèn)為false9.draggable:true則可拖動(dòng)，但需要你提供操作過(guò)程，默認(rèn)為false10.html:主體的內(nèi)容11.id：id值，通過(guò)id可以找到這個(gè)組件，建議一般加上這個(gè)id值12.width：寬度13.height：高度13.title:標(biāo)題14.titleCollapse：設(shè)為true，則點(diǎn)擊標(biāo)題欄的任何地方都能收縮，默認(rèn)為false.15.applyTo：（id）呈現(xiàn)在哪個(gè)html元素里面16.contentEl：（id）呈現(xiàn)哪個(gè)html元素里面，把el內(nèi)的內(nèi)容呈現(xiàn)17.renderTo：（id）呈現(xiàn)在哪個(gè)html元素里面
applyTo、contentEl、renderTo三者區(qū)別個(gè)人理解為：applyTo和RenderTo綁定到html元素中，contentEl則是html元素到ext組件中去。 上面說(shuō)到面板都是綁定在某個(gè)html元素中顯示面板，是局部的。Extjs中還有一個(gè)可以顯示在整個(gè)body中的組件Ext.ViewPort，它會(huì)隨著瀏覽器而變化。要注意的是一個(gè)頁(yè)面中只能存在一個(gè)viewport的實(shí)例。看下面的代碼 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)站主頁(yè)面，Viewport常用布局有fit、border等，設(shè)置layout屬性改變布局。 基本的面板我們了解了，還有一個(gè)很重要的面板TabPanel，這里用一個(gè)小例子做說(shuō)明，代碼就不解釋了。面板的用法是非常靈活的，我們可以發(fā)揮自己的想象力來(lái)做出漂亮的選項(xiàng)卡面板和實(shí)用的功能。因?yàn)樗强梢詿o(wú)限嵌套控件的。 function tabpanel(){ var tabpanel=new Ext.TabPanel({ activeTab:0, //設(shè)置默認(rèn)選擇的選項(xiàng)卡 renderTo:'tabpanel', width:200, height:150, items:[ { title:"第一個(gè)選項(xiàng)", html:"第一個(gè)的內(nèi)容" }, { title:"第二個(gè)選項(xiàng)", html:"第一個(gè)的內(nèi)容" } ] });}
 對(duì)待本人用到的東西來(lái)做一個(gè)小設(shè)計(jì)。代碼不多做講解，發(fā)一下代碼和效果吧 function viewportlayout(){ var view=new Ext.Viewport({ enableTabScroll:true, layout:"border", items:[ { title:'面板', html:"沒(méi)有美術(shù)細(xì)胞，布局比較難看", region:"north", height:50 }, { title:'菜單', collapsible:true, html:"菜單欄", region:"west", width:200 }, { xtype:"tabpanel", activeTab: 0, region:"center", items:[ {title:"面板1",html:"tab面板1的內(nèi)容"}, {title:"面板2",html:"tab面板2的內(nèi)容"} ] } ] })}
 基本的面板應(yīng)用就算說(shuō)完了。可能有些人認(rèn)為文章寫(xiě)的很基礎(chǔ)，沒(méi)辦法，我也是初學(xué)，只能寫(xiě)應(yīng)用。還沒(méi)能去研究ext的源碼。如果各位對(duì)文章有什么不好的地方或者需要改進(jìn)的地方請(qǐng)留言說(shuō)明，我會(huì)盡量做到。 源碼打包:http://files.cnblogs.com/dirain/ExtJsDemo3.rar |
|
|
