我剛才禁不住誘惑去看了一下Ext.Window的API文檔，發現只是比Panel多了點什么最大化、最小化、關閉、置前、置后、動畫引發目標設置、可調整大小這些功能。像什么標題欄、工具欄之類的東西在Ext.Panel早就封裝好了。搞定了Ext.Panel終於可以悶聲發大財羅。哈哈哈。
這一文主要總結一下，panel的常見用法。
一、使Panel的標題欄隱藏
這是常有的事，常常，一個欄目並不需要標題。有什么辦法呢，創建時config中加上：header:false。就ok了。
二、如何使Panel能被拖動
確保config中如下設置：
var config1={title:'這是標題欄',
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:'這是面板的內容！！！',
layout:'fit',
collapsible:true};
好了，關鍵就是上面紅色部分了，由前面的文檔可知：Ext.Panel.DD這個類只是提供移動Proxy元素的效果，鼠標一松，panel仍在老地方，所以得寫代碼實現。關於Ext.Panel.DD，這個類是非公開的，我在源代碼中也沒有找到。不曉得放在哪。最后，我只得打開FireFox+FireBug才看到它里面的東西。
為什么一定要floating:true呢？原因很簡單，要能拖動，那么這個div就是absolute的，而一個panel.el默認不會是absolute。所以非得設成floating，以讓它能浮動。
三、如何有Panel能折疊、展開效果。
這個很簡單，panel在title tools中提供一個toggle的工具，就是用它干這事的，不過，默認情況下，panel的這個功能是被關閉的。panel還提供一個功能，單擊title的任意一處都會產生toggle collapse效果。相關的config屬性我提出來如下：
animCollapse : Boolean
collapseFirst : Boolean
collapsed : Boolean
collapsedCls : String
collapsible : Boolean //事實上，把它設成true就ok了，其它幾個可以不設置。
titleCollapse : Boolean
關於它們的使用說明請參見前面的API文檔。不過，單看名字應當就曉得用了，取名很直觀。
四、怎樣為panel設置title tools。
就是怎樣為Panel的標題欄添加按鈕，這個容器，在config中類似如下代碼即可：
tools:[{id:close,handler:function(event, toolEl, panel){panel.hide();}}],
格式一般是：tools:[{……},{……},{……}]
五、怎樣顯示、隱藏panel
這個很容易,panel.show()/hide()就行了。但是，如果floating:true的話，那就麻煩了，show都顯示不了，我在FireBug中一看，panel.el.dom.style.left="-10000px"。這當然是顯示不出來的。所以，你show了還要setPosition一下。這才行了。
六、為panel添加子組件
簡單，在config中加items屬性，類似於如下代碼：
items:[{id:'win1',xtype:'window',title:'title',height:100,width:100}],
格式一般是：items:[{……},{……},{……}]
如果在定義時，沒有設置xtype，則子組件創建是xtype取defaultType的值。像上面，由於window創建后是不顯示的，所以，只得show出來。所以，我在定義時給它一個id。這樣在Ext.onReady()中就可以：Ext.getCmp("win1").show()。嘿，就出來了。其他組件的加入類似。一個{}是一個組件。
像上面那樣的叫惰性呈現，還有一種寫法是：items:[new XXX(config)]。這樣的定義會在組件創建時直接呈現。
七、為panel設置布局
這個是關鍵了。就是要設layout、layoutConfig。這個要詳細的講一下。平常要用嘛。這兒用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'
}],
其實，布局類的api接口很簡單，使用也不復雜。果然是把swing的那一套學過來了。
Ext.layout.BorderLayout是一個比較特殊的布局類，它沒有什么正兒八經的config，不像Panel它們。只需設一下layout，然后，在成員組件那兒用region標明是哪個區域就是了。Ext.layout.BorderLayout把一塊地盤分成五個區：east、west、south、north、center。
我個人非常喜歡這個布局，因為以它作為外層布局的話，就能很方便的實現cnblogs一樣的效果，我到現在還不知道那個左邊列固定寬，右邊列占滿剩余屏幕的布局是怎么搞的，除非寫javascript代碼在window.onload中手工調，否則，全靠css，真的是想不出辦法來，后來，我也找到一個辦法：用table。table有一個特性，可以把它設成占滿整個水平方向，第一列固定寬，第二列自動就是剩余的。不過，不曉得有沒有純css的解決方式，老實說，div+css實在太難控制了，table在水平方向上的布局優勢還是很大的。比如，同一行，放兩個內容，左邊的左對齊，右邊的右對齊，用div就麻煩了，又是浮動，挖空心思，用table就很顯然，兩個格：一個align=left，一個align=right。這話題扯遠了。發牢騷罷了。
八、怎樣使得Panel能被改變大小
事實上，如果真的panel能被改變大小，那么可以考慮使用window。只要把dragable設成false就成了。如果不喜歡那些按鈕，應當也可以想到辦法去掉的。panel本身沒有這個功能。不過，ExtJs有一個類提供這種功能，即：Ext.Resizable。它的用法很簡單，如下：
var resizer = new Ext.Resizable("element-id", {
handles: 'all',
minWidth: 200,
minHeight: 100,
maxWidth: 500,
maxHeight: 400,
pinned: true
});
由上可知，它的功能是為一個指定的元素提供可改變大小的功能。這個功能不出奇吧。怎么把它用於panel。嘿，其實就一個關鍵，怎樣取得x-panel所在元素的id。這個好辦，事實上，這件事我曾在Ext.Panel篇一中就論述了。二種方法：panel.el或者panel.getEl()都一樣。
因此，代碼應當這么寫：
var resizer=new Ext.Resizable(panel1.getEl(),{handlers:'all',pinned:true});
resizer.on('resize'，function(){panel1.updateBox(panel1.getSize());});
在創建好panel之后，緊跟着加上這兩行代碼就行了。為什么要加上后面的那行呢？因為這個Ext.Resizable只會改變panel.getEl()的大小，但是里面的內容並不會因此而發生變化，結果是新增加的那一部分是灰色的。那是proxy的顏色吧。要把panel的子組件調整到實質大小必須要updateBox，可者是setWidth、setHeight。
這個功能蠻簡單，如果要對Ext.Resizable的詳情進行了解，請參見其官方文檔。
九、怎樣為Panel提供工具欄
這個問題重要，panel提供兩種工具欄：tbar、bbar。但是定義的方法都一樣。首先，我要研究一下tbar的類型：Object/Array，api文檔說：可以是toolbar對象、可以是toolbar的config、還可以是按鈕的數組，當然也可以是前兩者的數組。目標清楚了，就要小小地研究一下toolbar，toolbar這個主題比較大，事實上應當作為一個專題來搞的。不過，先搞清楚個大概用着先吧。
這兒有一篇關於Ext.Toolbar的好文章，點此處查看！關於在Ext.Panel中使用工具欄，最直觀、傻瓜式的用法，點此處查看。關於toolbar的更詳細的研究、使用方法將在下一篇中給出。
至此，關於Ext.Panel的常見問題都在這兒了，搞清楚了這些，基本上常規需求都可以實現了。