怪不得我对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 u