Ext.Panel组件详解

Ext.onReady(function(){
    var panel = new Ext.Panel({
        renderTo :  Ext.getBody(),
        height : 200,
        width : 400,
        title : "标题",
        html : "Welcome",
        tbar : [
            new Ext.Toolbar.Button({ text : "工具栏1"}),
            { text : "工具栏2"}
        ],
        fbar : [{ text : "底部按钮1"},{ text : "底部按钮2"}],
        collapsible : true,
        autoScroll : true,
        contentEl : 'innerContent',
        floating : true,
        x : 100,
        y : 100,
        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:"save"},
        {id:"help"},
        {id:"up"},
        {    
            id:"close",
            handler:function(){
                Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")
            }
        }]
    });
 })

因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件，所以非常有必要介绍Panel组件的配置参数和相关的属性、方法。

//配置参数(只列举部分常用参数)
1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false
3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false

4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],
6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right

8.collapsible：设为true，显示右上角的收缩按钮，默认为false
9.draggable:true则可拖动，但需要你提供操作过程，默认为false

10.html:主体的内容
11.id：id值，通过id可以找到这个组件，建议一般加上这个id值
12.width：宽度
13.height：高度
13.title:标题

14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.

15.applyTo：（id）呈现在哪个html元素里面
16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现
17.renderTo：（id）呈现在哪个html元素里面
//关于这三个参数的区别(个人认为：el，applyTo和RenderTo强调to到html元素中，contentEl则是html元素到ext组件中去)