我剛才禁不住誘惑去看了一下Ext.Window的API文檔，發(fā)現(xiàn)只是比Panel多了點(diǎn)什么最大化、最小化、關(guān)閉、置前、置后、動(dòng)畫引發(fā)目標(biāo)設(shè)置、可調(diào)整大小這些功能。像什么標(biāo)題欄、工具欄之類的東西在Ext.Panel早就封裝好了。搞定了Ext.Panel終于可以悶聲發(fā)大財(cái)羅。哈哈哈。

　　這一文主要總結(jié)一下，panel的常見用法。

　　一、使Panel的標(biāo)題欄隱藏

　　這是常有的事，常常，一個(gè)欄目并不需要標(biāo)題。有什么辦法呢，創(chuàng)建時(shí)config中加上：header:false。就ok了。

　　二、如何使Panel能被拖動(dòng)

　　確保config中如下設(shè)置：

 var config1={title:'這是標(biāo)題欄',
     width:300,
     height:300,
     header:false,
     floating:true,
     renderTo:Ext.getBody(),
     draggable:{
　　　insertProxy: false,
     
　　　onDrag : function(e){
　　　var pel = this.proxy.getEl();
　　　this.x = pel.getLeft(true);
　　　this.y = pel.getTop(true);
     
　　　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);
       }
     },
     html:'這是面板的內(nèi)容?。。?,
     layout:'fit',
     collapsible:true};

　　好了，關(guān)鍵就是上面紅色部分了，由前面的文檔可知：Ext.Panel.DD這個(gè)類只是提供移動(dòng)Proxy元素的效果，鼠標(biāo)一松，panel仍在老地方，所以得寫代碼實(shí)現(xiàn)。關(guān)于Ext.Panel.DD，這個(gè)類是非公開的，我在源代碼中也沒有找到。不曉得放在哪。最后，我只得打開FireFox+FireBug才看到它里面的東西。

　　為什么一定要floating:true呢？原因很簡單，要能拖動(dòng)，那么這個(gè)div就是absolute的，而一個(gè)panel.el默認(rèn)不會(huì)是absolute。所以非得設(shè)成floating，以讓它能浮動(dòng)。

　　三、如何有Panel能折疊、展開效果。

　　這個(gè)很簡單，panel在title tools中提供一個(gè)toggle的工具，就是用它干這事的，不過，默認(rèn)情況下，panel的這個(gè)功能是被關(guān)閉的。panel還提供一個(gè)功能，單擊title的任意一處都會(huì)產(chǎn)生toggle collapse效果。相關(guān)的config屬性我提出來如下：

　　animCollapse : Boolean

　　collapseFirst : Boolean

　　collapsed : Boolean

　　collapsedCls : String

　　collapsible : Boolean　　//事實(shí)上，把它設(shè)成true就ok了，其它幾個(gè)可以不設(shè)置。

　　titleCollapse : Boolean

　　關(guān)于它們的使用說明請參見前面的API文檔。不過，單看名字應(yīng)當(dāng)就曉得用了，取名很直觀。

　　四、怎樣為panel設(shè)置title tools。

　　就是怎樣為Panel的標(biāo)題欄添加按鈕，這個(gè)容器，在config中類似如下代碼即可：

　　tools:[{id:close,handler:function(event, toolEl, panel){panel.hide();}}],

　　格式一般是：tools:[{……},{……},{……}]

　　五、怎樣顯示、隱藏panel

　　這個(gè)很容易,panel.show()/hide()就行了。但是，如果floating:true的話，那就麻煩了，show都顯示不了，我在FireBug中一看，panel.el.dom.style.left="-10000px"。這當(dāng)然是顯示不出來的。所以，你show了還要setPosition一下。這才行了。

　　六、為panel添加子組件

　　簡單，在config中加items屬性，類似于如下代碼：

　　items:[{id:'win1',xtype:'window',title:'title',height:100,width:100}],

　　格式一般是：items:[{……},{……},{……}]

　　如果在定義時(shí)，沒有設(shè)置xtype，則子組件創(chuàng)建是xtype取defaultType的值。像上面，由于window創(chuàng)建后是不顯示的，所以，只得show出來。所以，我在定義時(shí)給它一個(gè)id。這樣在Ext.onReady()中就可以：Ext.getCmp("win1").show()。嘿，就出來了。其他組件的加入類似。一個(gè){}是一個(gè)組件。

　　像上面那樣的叫惰性呈現(xiàn)，還有一種寫法是：items:[new XXX(config)]。這樣的定義會(huì)在組件創(chuàng)建時(shí)直接呈現(xiàn)。

　　七、為panel設(shè)置布局

　　這個(gè)是關(guān)鍵了。就是要設(shè)layout、layoutConfig。這個(gè)要詳細(xì)的講一下。平常要用嘛。這兒用BorderLayout的文檔上的代碼為例：

     layout:'border',
     items: [{
       title: 'South Panel',
       region: 'south',
       height: 100,
       minSize: 75,
       maxSize: 250,
       margins: '0 5 5 5'
      },{
       title: 'West Panel',
       region:'west',
       margins: '5 0 0 5',
       cmargins: '5 5 0 5',
       width: 200,
       minSize: 100,
       maxSize: 300
      },{
       title: 'Main Content',
       region:'center',
       margins: '5 5 0 0'
      }],

　　其實(shí)，布局類的api接口很簡單，使用也不復(fù)雜。果然是把swing的那一套學(xué)過來了。

　　Ext.layout.BorderLayout是一個(gè)比較特殊的布局類，它沒有什么正兒八經(jīng)的config，不像Panel它們。只需設(shè)一下layout，然后，在成員組件那兒用region標(biāo)明是哪個(gè)區(qū)域就是了。Ext.layout.BorderLayout把一塊地盤分成五個(gè)區(qū)：east、west、south、north、center。

　　我個(gè)人非常喜歡這個(gè)布局，因?yàn)橐运鳛橥鈱硬季值脑?，就能很方便的?shí)現(xiàn)cnblogs一樣的效果，我到現(xiàn)在還不知道那個(gè)左邊列固定寬，右邊列占滿剩余屏幕的布局是怎么搞的，除非寫javascript代碼在window.onload中手工調(diào)，否則，全靠css，真的是想不出辦法來，后來，我也找到一個(gè)辦法：用table。table有一個(gè)特性，可以把它設(shè)成占滿整個(gè)水平方向，第一列固定寬，第二列自動(dòng)就是剩余的。不過，不曉得有沒有純css的解決方式，老實(shí)說，div+css實(shí)在太難控制了，table在水平方向上的布局優(yōu)勢還是很大的。比如，同一行，放兩個(gè)內(nèi)容，左邊的左對齊，右邊的右對齊，用div就麻煩了，又是浮動(dòng)，挖空心思，用table就很顯然，兩個(gè)格：一個(gè)align=left，一個(gè)align=right。這話題扯遠(yuǎn)了。發(fā)牢騷罷了。

　　八、怎樣使得Panel能被改變大小

　　事實(shí)上，如果真的panel能被改變大小，那么可以考慮使用window。只要把dragable設(shè)成false就成了。如果不喜歡那些按鈕，應(yīng)當(dāng)也可以想到辦法去掉的。panel本身沒有這個(gè)功能。不過，ExtJs有一個(gè)類提供這種功能，即：Ext.Resizable。它的用法很簡單，如下：

var resizer = new Ext.Resizable("element-id", {
    handles: 'all',
    minWidth: 200,
    minHeight: 100,
    maxWidth: 500,
    maxHeight: 400,
    pinned: true
});

　　由上可知，它的功能是為一個(gè)指定的元素提供可改變大小的功能。這個(gè)功能不出奇吧。怎么把它用于panel。嘿，其實(shí)就一個(gè)關(guān)鍵，怎樣取得x-panel所在元素的id。這個(gè)好辦，事實(shí)上，這件事我曾在Ext.Panel篇一中就論述了。二種方法：panel.el或者panel.getEl()都一樣。

　　因此，代碼應(yīng)當(dāng)這么寫：

　　var resizer=new Ext.Resizable(panel1.getEl(),{handlers:'all',pinned:true});

　　resizer.on('resize'，function(){panel1.updateBox(panel1.getSize());});

　　在創(chuàng)建好panel之后，緊跟著加上這兩行代碼就行了。為什么要加上后面的那行呢？因?yàn)檫@個(gè)Ext.Resizable只會(huì)改變panel.getEl()的大小，但是里面的內(nèi)容并不會(huì)因此而發(fā)生變化，結(jié)果是新增加的那一部分是灰色的。那是proxy的顏色吧。要把panel的子組件調(diào)整到實(shí)質(zhì)大小必須要updateBox，可者是setWidth、setHeight。

　　這個(gè)功能蠻簡單，如果要對Ext.Resizable的詳情進(jìn)行了解，請參見其官方文檔。

　　九、怎樣為Panel提供工具欄

　　這個(gè)問題重要，panel提供兩種工具欄：tbar、bbar。但是定義的方法都一樣。首先，我要研究一下tbar的類型：Object/Array，api文檔說：可以是toolbar對象、可以是toolbar的config、還可以是按鈕的數(shù)組，當(dāng)然也可以是前兩者的數(shù)組。目標(biāo)清楚了，就要小小地研究一下toolbar，toolbar這個(gè)主題比較大，事實(shí)上應(yīng)當(dāng)作為一個(gè)專題來搞的。不過，先搞清楚個(gè)大概用著先吧。

　　這兒有一篇關(guān)于Ext.Toolbar的好文章，點(diǎn)此處查看！關(guān)于在Ext.Panel中使用工具欄，最直觀、傻瓜式的用法，點(diǎn)此處查看。關(guān)于toolbar的更詳細(xì)的研究、使用方法將在下一篇中給出。

　　至此，關(guān)于Ext.Panel的常見問題都在這兒了，搞清楚了這些，基本上常規(guī)需求都可以實(shí)現(xiàn)了。