怪不得我對Ext.Panel窮追猛打，前面已經寫過四篇針對它的文章了。不過。Ext.Panel的問題搞得差不多了。下面我貼出研究代碼，及效果圖。再解釋一下。這下圖文結合了。以後自己忘記了，看一下就明白了。
var panel1;
function newPanel1(){
var config1={title:'這是標題欄',
width:300,
height:300,
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);
}
},
tools:[{id:close,handler:function(event, toolEl, panel){panel.hide();}}],
layout:'border',
items: [{
title: '左邊欄',
region: 'west',
split:true,
height: 100,
width:200,
minSize: 75,
maxSize: 250,
margins: '5 0 5 5'
},{
title: '中間主體部分',
region:'center',
margins:'5 5 5 0',
split:true,
minSize: 100,
}],
tbar:['請輸入關鍵字:',
{xtype:'textfield',width:80},'-',
{text:'有種就點一下',handler:function(){alert("小子，你剛纔點了此按鈕！");}}],
collapsible:true,
shadow:false};
panel1=new Ext.Panel(config1);
panel1.setPosition(0,0);
var resizer=new Ext.Resizable(panel1.getEl(),{handlers:'all'});
resizer.on('resize',function(){panel1.updateBox(panel1.getSize());});
}
Ext.onReady(newPanel1);
上面代碼的要點基本上在前面第四篇中講過了。也有一些事還沒有來得及講。我分門別類的補充一下。
一、Ext.Panel的組成
Ext.Panel有五個部分，即：header、body、tbar、bbar、footer。在創建了panel的實例後，這五個對象就能 被引用了，它們分別指向panel五個最重要的部分，tbar就是上面的工具欄，bbar就是下面的工具欄，footer就是放buttons的地方，它 處於最下面。body就是整個panel的主體部分了。事實上，大夥只要用FireBug去看一下panel的dom結構就會發現，body外面還有一個 div。這個div也有一個引用，叫：bwrap。不過，官方API文檔中沒有提及，想必是不想讓大夥去用它，怕以後會有變更。另外，tbar、bbar 也是非文檔支持的。官方推薦使用：getTopToolbar()、getBottomToolbar()，用它們來獲得上下兩個工具欄的引用，不過，這 種方法只有在render後纔有效，有的兄弟使用了它，結果鳥結果都沒有。大惑、不解。如果要在render前操作工具欄，還是要用tbar、bbar 的。
header、body、footer在官方文檔中都有說明，是Ext.Element類型。不用說了。
基本上，有了這五個對象我們可以用它們來設置panel的各個部分了。
二、如臂使指的操作Ext.Panel的每一寸土地
有了上面五個對象，能搞定一些事情，但是，要說完全控制Ext.Panel這頭驢還有所不及啊。這個問題一般人俺是不給他講的哦。哈哈哈。
panel最外層的那個div，可以用panel.el或panel.getEl()來獲得它的Element引用。很多人不能理解，有了它有 個屁用？一個Panel能玩出前面所說的這麼多的花樣足夠了。夠用了。然而永遠不要小看客戶的花花腸子。他們名堂多着吶。有了panel.el，能有什麼 好處，嘿，曉得Ext.Fx不？Element能用到所有在它裏面定義的特效(animations)。而在Panel中，你去看一看官方API文檔，沒 一字提及。也沒法控制它搞點特效出來。你哪怕看了Ext.Panel也不會結果的。怎麼辦，得依靠Element了。我現在慶幸當初把Element的 API研究得很徹底。
特效是一方面，另外，你去看一看Ext.Window的API文檔，會發現，它有alignTo、anchorTo的功能了，這可是好東西啊。 但是，Ext.Panel沒有這個功能。我不用去看Ext.Window的代碼就曉得，這肯定是取了panel.el來搞的，Element有 alignTo、anchorTo這兩個API。例如：如何使Panel居中：panel.el.center()就行了。超強大啊。
所以啊。有了panel.el這個引用，依託於ExtJs對dom的強大封裝結果所得的Element。我們可以做任何事(你能想到的、不能想到的)。
另外，還有一個東西沒有被文檔公開：component.container。那指向component.el的父元素(div)。也是個Element引用。儘管我們能用這個Element做事，但是，貌似還沒有用到它的時候。機會不多。
好了，這兒談到的都是關於控制Panel自身的架子的，說通俗點，架子是衣櫃，但是衣櫃裏面的衣服怎麼取出來呢？panel.el已經能很好地 控制整個衣櫃，但是，衣服還是一件都取不出來啊。有兄弟發火了，不是騙我嗎？這就是所謂的控制每一寸土地嗎？鑑於這個內容層次問題，把它放下一小節。
三、取panel這個衣櫃裏的衣服
這個問題是我老劉的獨門武學，我敢保證曉得這事的人不多。曉得這事的人必定是用FireBug研究過panel的dom結構的人或者是研究過 layout的源代碼的人。這種人不多啊。大夥都本着能用就行的想法啊。不吹了。還記得Ext.Panel的API文檔上面一句話：
If this Panel is intended to be used as the host of a Layout (See layout then the body Element must not be loaded or changed - it is under the control of the Panel's Layout.
這是關於body的說明中的一句話，說得好，精闢，它說，如果你想在panel中用佈局類，那麼你不得以任意方式來修改body。不要想着用 panel.body.update(xxxx)來幹活了。因爲文檔說了：it is under the control of the Panel's Layout。它正處在panel的layout的控制之下，嘿，這是我的layout的地盤，你就不要來整蠱了。
就是說，要麼用body，要麼就只能用layout。雙方是排斥的，這不難理解。我一個小時前，在FireBug寫了條命令語句：
console.dir(panel1);
這個東西諸位不曉得的話，那意味着你要去研究一下FireBug了。它的作用是把panel1的所有成員都輸出到控制檯窗口中。我看了輸出的結果，發現：panel有一個layout的成員，我發現了個有趣的結果：
layout有兩個成員：center、west。
這兒我用的是border layout。因爲這兒我只用到兩個區，所以只有center、west。如果五個區都有了，推理得：那就會有五個了：west/east/center/south/north。原來，borderlayout是有五個這樣的引用，可供我們來控制這五個區域。
哈哈哈，有了這五個對象，就相當於衣櫃中有五個格子，我的手又能伸進更細緻的地方了。
依此推理(我還沒來得及研究layout的源代碼)可知，我們是有能力利用layout的提供的一些接口來控制body內部的細節的。
剛纔靈光一閃，API文檔中，提到兩個類：
Ext.layout.BorderLayout.Region
Ext.layout.BorderLayout.SplitRegion
我在FireBug控制檯寫下如下實驗代碼：
panel1.layout.west instanceof Ext.layout.BorderLayout.SplitRegion
結果爲：true
嘿，可見，borderLayout是內部是以區域對象來進行控制的。不過，在BorderLayout的官方文檔中沒有對此提及，Ext.layout.BorderLayout.Region這兩個類的文檔倒是有的。
總結經驗：layout不僅僅只是設計時佈局，也許它提供給我們一些有意思的接口啊，只是，這個可能需要自己去研究、琢磨。
四、關於BorderLayout的釘子
再次吹牛，這個問題老實說，在API上面是沒有講到的。就是在定義borderLayout的各個區域時，注意要設幾個 量：region/split/margins/cmargins。這個用法應當不用講了，自己瞎琢磨去吧。那個cmargins的用法我還沒有摸明白。 網上關於這方面的細節資料太少了，一個勁地在那兒打屁。難有實質性內容，真是的。
五、關於Toolbar的事
關於工具欄類我現在還沒有來得及研究。不過初步用法還是要說一下：
'xxxxx'相當於{xtype:'tbtext',text:'xxxxx'}
'-'相當於{xtype:'tbseparator'}
也是個簡寫法。
六、關於resize功能與Ext.Panel的一些衝突
pinned:true不能設、shadow必須爲false。不然衝突起來的效果……描述出來。這個是我個人摸索的結果。不想描述。試一試就出來了。
至此，Ext.Panel總算終結了。我等不及了，得研究一下Ext.data中的東西了。關於UI，一個理，把Element、Component、Observable、BoxComponent好好的研究一把，UI就觸類旁通了。
