Panel 页面布局篇

布局篇 
 1.panel accordion 布局
  var panel = new Ext.Panel({  
            layout : 'accordion',  
            layoutConfig : {  
                activeOnTop : true,//设置打开的子面板置顶  
                fill : true,//子面板充满父面板的剩余空间  
                hideCollapseTool: false,//显示“展开收缩”按钮  
                titleCollapse : true,//允许通过点击子面板的标题来展开或收缩面板  
                animate:true//使用动画效果  
            },  
            title:'Ext.layout.Accordion布局示例',  
            frame:true,//渲染面板  
            height : 150,  
            width : 250,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
            },  
            items: [  
                {  
                    title : '嵌套面板一',  
                    html : '说明一' 
                },  
                {  
                    title : '嵌套面板二',  
                    html : '说明二' 
                }  
                ,  
                {  
                    title : '嵌套面板三',  
                    html : '说明三' 
                }  
            ]  
        })  

 2.panel cardLayOut 布局
   var panel = new Ext.Panel({  
            layout : 'card',  
            activeItem : 0,//设置默认显示第一个子面板  
            title:'Ext.layout.CardLayout布局示例',  
            frame:true,//渲染面板  
            height : 150,  
            width : 250,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
            },  
            items: [  
                {  
                    title : '嵌套面板一',  
                    html : '说明一',  
                    id : 'p1' 
                },  
                {  
                    title : '嵌套面板二',  
                    html : '说明二',  
                    id : 'p2' 
                }  
                ,  
                {  
                    title : '嵌套面板三',  
                    html : '说明三',  
                    id : 'p3' 
                }  
            ],  
            buttons:[  
                {  
                    text : '上一页',  
                    handler : changePage  
                },  
                {  
                    text : '下一页',  
                    handler : changePage  
                }  
            ]  
        })  
        //切换子面板  
        function changePage(btn){  
            var index = Number(panel.layout.activeItem.id.substring(1));  
            if(btn.text == '上一页'){  
                index -= 1;  
                if(index < 1){  
                    index = 1;  
                }  
            }else{  
                index += 1;  
                if(index > 3){  
                    index = 3;  
                }  
            }  
            panel.layout.setActiveItem('p'+index);  
        }  

 3.layout.AnchorLayout布局panel  

        var panel = new Ext.Panel({  
            layout : 'anchor',  
            title:'Ext.layout.AnchorLayout布局示例',  
            frame:false,//渲染面板  
            height : 150,  
            width : 300,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
            },  
            items: [  
                {  
                    anchor : '50% 50%',//设置子面板的宽高为父面板的50%  
                    title : '子面板' 
                }  
            ]  
        })  
       或者：  
                        items: [  
                {  
                    anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素  
                    title : '子面板' 
                }  
            ]  
 
      或者：  
            items: [  
                {  
                    anchor : 'r b',//相对于父容器的右边和底边的差值进行定位  
                    width : 200,  
                    height : 100,  
                    title : '子面板' 
                }  
            ]  
 
    或者：  
            items: [  
                {  
                    x : '10%',//横坐标为距父容器宽度10%的位置  
                    y : 10,//纵坐标为距父容器上边缘10像素的位置  
                    width : 100,  
                    height : 50,  
                    title : '子面板一' 
                },  
                {  
                    x : 90,//横坐标为距父容器左边缘90像素的位置  
                    y : 70,//纵坐标为距父容器上边缘70像素的位置  
                    width : 100,  
                    height : 50,  
                    title : '子面板二' 
                }  
            ]  

 4.FormLayout布局panel 
  var panel = new Ext.Panel({  
            title:'Ext.layout.FormLayout布局示例',  
            layout : 'form',  
            labelSeparator : '：',//在容器中指定分隔符  
            frame:true,//渲染面板  
            height : 110,  
            width : 300,  
            applyTo :'panel',  
            defaultType: 'textfield',//指定容器子元素默认的xtype类型为textfield  
            defaults : {//设置默认属性  
                msgTarget: 'side'//指定默认的错误信息提示方式  
            },  
            items: [  
                {  
                    fieldLabel:'用户名',  
                    allowBlank : false 
                },  
                {  
                    fieldLabel:'密码',  
                    allowBlank : false 
                }  
            ]  
        }) 

 5.ColumnLayout布局panel
 var panel = new Ext.Panel({  
            title:'Ext.layout.ColumnLayout布局示例',  
            layout : 'column',  
            frame:true,//渲染面板  
            height : 150,  
            width : 250,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色  
                frame : true 
            },  
            items: [{  
                    title:'子面板一',  
                    width:100,//指定列宽为100像素  
                    height : 100  
                },  
                {  
                    title:'子面板二',  
                    width:100,//指定列宽为100像素  
                    height : 100  
                }  
            ]  
        })  
 
           或者：  
            items: [  
                {  
                    title:'子面板一',  
                    columnWidth:.3,//指定列宽为容器宽度的30%  
                    height : 100  
                },  
                {  
                    title:'子面板二',  
                    columnWidth:.7,//指定列宽为容器宽度的70%  
                    height : 100  
                }  
            ]  
 
          或者：  
            items: [  
                {  
                    title:'子面板一',  
                    width : 100,//指定列宽为100像素  
                    height : 100  
                },  
                {  
                    title:'子面板二',  
                    width : 100,  
                    columnWidth:.3,//指定列宽为容器剩余宽度的30%  
                    height : 100  
                },  
                {  
                    title:'子面板三',  
                    columnWidth:.7,//指定列宽为容器剩余宽度的70%  
                    height : 100  
                }  
            ]  

 6.layout.TableLayout布局panel  
        var panel = new Ext.Panel({  
            title:'Ext.layout.TableLayout布局示例',  
            layout : 'table',  
            layoutConfig : {  
                columns : 4 //设置表格布局默认列数为4列  
            },  
            frame:true,//渲染面板  
            height : 150,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色  
                frame : true,  
                height : 50  
            },  
            items: [  
                {  
                    title:'子面板一',  
                    colspan : 3//设置跨列  
                },  
                {  
                    title:'子面板二',  
                    rowspan : 2,//设置跨行  
                    height : 100  
                },  
                {title:'子面板三'},  
                {title:'子面板四'},  
                {title:'子面板五'}  
            ]  
        })  

 7.layout.BorderLayout布局panel  
        var panel = new Ext.Panel({  
            title : 'Ext.layout.BorderLayout布局示例',  
            layout:'border',//表格布局  
            height : 250,  
            width : 400,  
            applyTo : 'panel',  
            items: [  
            {  
                title: 'north Panel',  
                html : '上边',  
                region: 'north',//指定子面板所在区域为north  
                height: 50  
            },  
            {  
                title: 'South Panel',  
                html : '下边',  
                region: 'south',//指定子面板所在区域为south  
                height: 50  
            },{  
                title: 'West Panel',  
                html : '左边',  
                region:'west',//指定子面板所在区域为west  
                width: 100  
            },{  
                title: 'east Panel',  
                html : '右边',  
                region:'east',//指定子面板所在区域为east  
                width: 100  
            },{  
                title: 'Main Content',  
                html : '中间',  
                region:'center'//指定子面板所在区域为center  
            }]  
        });  

 8.Ext.Viewport布局示例  
        new Ext.Viewport({  
            title : 'Ext.Viewport示例',  
            layout:'border',//表格布局  
            items: [  
            {  
                title: 'north Panel',  
                html : '上边',  
                region: 'north',//指定子面板所在区域为north  
                height: 100  
            },{  
                title: 'West Panel',  
                html : '左边',  
                region:'west',//指定子面板所在区域为west  
                width: 150  
            },{  
                title: 'Main Content',  
                html : '中间',  
                region:'center'//指定子面板所在区域为center  
            }]  
        });  
 
  9.Ext.TabPanel 标签页示例  
        var tabPanel = new Ext.TabPanel({  
            height : 150,  
            width : 300,  
            activeTab : 0,//默认激活第一个tab页  
            animScroll : true,//使用动画滚动效果  
            enableTabScroll : true,//tab标签超宽时自动出现滚动按钮  
            applyTo : 'panel',  
            items: [  
                {title: 'tab标签页1',html : 'tab标签页1内容'},  
                {title: 'tab标签页2',html : 'tab标签页2内容'},  
                {title: 'tab标签页3',html : 'tab标签页3内容'},  
                {title: 'tab标签页4',html : 'tab标签页4内容'},  
                {title: 'tab标签页5',html : 'tab标签页5内容'}  
            ]  
        });