extJs 2.0学习笔记(Ext.Panel终结篇)

怪不得我对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就触类旁通了。