[Extjs]Panle 的属性

包括TabPanel、GridPanel、FormPanle、TreePanel
    example：
        //html代码
        <div id="container">
            </div>

        //js代码
        var p = new Ext.Panel({
            id:'panelId',
            title:'My Panel',    //标题
            collapsible:true,    //右上角上的那个收缩按钮，设为false则不显示
            titleCollapse:true,    //true则点击标题栏任何位置都能收缩
            //renderTo:'msg4',    //这个panel显示在html中id为container的层中     applyTo/contentEl
            //还可以
            x:100,
            y:100,
            renderTo:Ext.getBody(),
            width:400,
            height:200,
            autoScroll:true,    //内容溢出时产生滚动条
            bbar:[
                {text:'按钮1',
                 handler:function(){
                    Ext.MessageBox.alert("我是底部按钮1","点击底部按钮1时弹出的弹出框");
                 }
                },
                {text:'按钮2'}
            ],    //底部工具栏
            tbar:[{text:'按钮1'},{text:'按钮2'}],    //顶部工具栏
            buttons:[{text:'按钮1'},{text:'按钮2'}],    //footer按钮
            buttonAlign:'center',    //按钮位置，默认right
            tools:[
                {id:'save'},
                {id:'help'},
                {id:'up'},
                {id:'close',handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏的关闭按钮时激发");}}
            ],
            //draggable:false,    //true为可拖动
            //可拖动
            draggable:true,
            draggable:{
                insertProxy:false,    //拖动时不虚线显示原始位置
                onDrag:function(e){
                    var pel = this.proxy.getEl();
                    this.x = pel.getLeft(true);
                    this.y = pel.getTop(true);    //获取拖动时panel的坐标
                    //阴影随行
                    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);    //移动到最终位置
                }
            },
            floating:true,    //必须为true，才可拖动
            frame: true,    //圆角边框
            html: "<p>内容，我包含的html可以被执行！</p>"//panel主体中的内容，可以执行html代码
        });

我做的第一个panel

/**
 * 
 */
 Ext.onReady(function(){
  Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 400,
    width: 400,
    border:false,
    padding:'0 0 0 0',
    header : false,
    shadow : false,
    layout: 'fit', 
    bodyStyle:"background-color:#000fff",
    items : [{
    xtype : 'panel',
    title : '创建应用',
    tools : [{
    type : 'close'
    }],
    items : [{
    xtype : 'form',
    items :[{
    xtype : 'textfield',
    fieldLabel : '模板名称',
    labelAlign : 'right',
    value : '轻量级web应用'
    },{
    xtype : 'combobox',
    fieldLabel : 'Domains',
    labelAlign : 'right',
    value : 'clouds.io'
    },{
    xtype : 'combobox',
    fieldLabel : '内存大小',
    labelAlign : 'right',
    value : '256m'
    },{
    xtype : 'textfield',
    fieldLabel : '运行时环境',
    labelAlign : 'right',
    value : 'tomcat'
    },{
    xtype : 'textfield',
    fieldLabel : '数据储存服务',
    labelAlign : 'right',
    value : 'mysql oracle'
    },{
    xtype : 'textfield',
    fieldLabel : '数据分析服务',
    labelAlign : 'right',
    value : '流数据'
    },{
    xtype : 'textfield',
    fieldLabel : '应用服务',
    labelAlign : 'right',
    value : '消息中间件'
    },{
    xtype : 'fieldset',
    layout : 'column',
    items : [{
    xtype :'combobox',
    fieldLabel : '创建位置',
    labelAlign : 'right',
    value : 'org1',
    width :  250
    },{
    xtype : 'combobox',
    value : 'space1',
    width : 120
    }]
    },{
    xtype : 'textfield',
    fieldLabel : '应用名称',
    value : 'Que sera',
    labelAlign : 'right'
    },{
    xtype : 'radiogroup',
    fieldLabel : '上传文件',
    id : 'upload',
    labelAlign : 'right',
    columns : 1,
    items :[
    { boxLabel: '上传本地文件', name: 'rb', inputValue: '1' },
    {
    xtype : 'filefield',
    hidden : true,
    id : 'uploadFile',
    width : 280
    },
//     { xtype : 'textfield',hidden : true,id : 'uploadFile'},
            { boxLabel: '上传模板应用', name: 'rb', inputValue: '2' },
            { 
            xtype : 'filefield',
            hidden : true,
            id : 'uploadTemplate',
            width : 280
            }
    ],
    listeners :{
    change : function(){
    var obj=Ext.getCmp('upload').items.items;
    console.log(obj);
    if(obj[0].checked){
var com=Ext.getCmp('uploadFile');
com.setVisible(true);
com=Ext.getCmp('uploadTemplate');
com.setVisible(false);
    }else if(obj[2].checked){
    var com=Ext.getCmp('uploadFile');
com.setVisible(false);
com=Ext.getCmp('uploadTemplate');
com.setVisible(true);
    }
    }
    }
    }]
    }],
    dockedItems :[{
    xtype : 'toolbar',
    dock  : 'bottom',
    items :[{
    text : '上一步'
    },'->',{
    text : '下一步'
    }]
    }]
    }]
}).show();
 });