Ext的Panel总结（好文章）

我刚才禁不住诱惑去看了一下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的常见问题都在这儿了，搞清楚了这些，基本上常规需求都可以实现了。