layout 总结

1.column Layout 列布局
在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。
columnWidth表示使用百分比的形式指定列宽度。
width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。
Ext.onReady(function(){
    var window = new Ext.Window({
        layout: "column",
        title: "Hello World",
        id: "helloWorldWindow",
        bodyStyle: "padding:10px;",
        width: 550,
        height: 300,
        x: 100,
        y: 100,
        items: [
            {   
                columnWidth: .6,
                baseCls: "x-plain",
                frame: true,
                layout: "form",
                bodyStyle: "padding:5px;",
                items: [
                    {xtype: "textfield", fieldLabel: "UserName"},
                    {xtype: "textfield", fieldLabel: "Age"}   
                ]
            },
            {   
                columnWidth: .3,
                baseCls: "x-plain",
                bodyStyle: "padding:5px;",
                items: [
                    {xtype: "textarea"}
                ]
            },
            {   
                columnWidth: .1,
                baseCls: "x-plain",
                bodyStyle: "padding:5px;",
                layout: "form",
                items: [
                    {
                        xtype: "button",
                        text: "Ok",
                        handler: function() {
                            alert("OK");
                        }
                    },
                    {
                        xtype: "button",
                        text: "Cancel",
                        handler: function() {
                            alert("Cancel");
                        }
                    }   
                ]
            }
        ]
    });

    window.render(Ext.getDom("tt"));
    window.show();
});
2.fit Layout

Fit布局，子元素将自动填满整个父容器（对元素设置宽度无效），如果容器组件中有多个子元素，则只

会显示第一个子元素。

Ext.onReady(
    function(){
        var win = new Ext.Window({
            title: "Hello World",
            renderTo: Ext.getDom("tt"),
            width: 400,
            height: 250,
            x: 150,
            y: 50,
            layout: "fit",
            items: [
                {xtype:"panel", title:"O"},
                {xtype:"panel", title:"K"}
            ]
        });
        win.show();
    }
);

3. border Layout

一、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中

五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需

要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。
Ext.onReady(
    function() {
        new Ext.Viewport({
            layout:"border",
            items:[
            {
                region:"north",
                height:80,
                xtype: "label",
                //style: "border: 1px solid red;padding:1px;",
                frame: true,
                text: "cdred.net study club"
            },
            {

                region:"south",
                height:20,
                xtype:'label',
                text:'Status show zone..'
            },
            {
                region:"center",
                title:"中央面板"
            },
            {
                region:"west",
                width:200,
                title:"系统栏目",
                collapsible: true
            },
            {
                region:"east",
                width:150,
                collapsed: true,
                collapsible: true,
                title:"在线好友"
            }
                ]

        });
    }
);

4.accordion Layout
Accordion布局由类Ext.layout.Accordion定义，表示可折叠的布局，点击每一个子元素的头部名称或右

边的按钮，则会展开该面板，并收缩其它已经展开的面板。
layoutConfig：true表示在执行展开折叠时启动动画效果，默认值为false。
** 注意如果你是用 panel之类的 必须拥有 title:'' 属性

Ext.onReady(function(){
    var panel = new Ext.Panel({
        title:"人员信息",
        renderTo:Ext.getDom("tt"),
        frame:true,
        width:250,
        height:300,
        layout:"accordion",

        layoutConfig: {
            animate: true
        },
        items:[
            {xtype:"panel", title:"O", html:"这是子元素1中的内容"},
            {xtype:"panel", title:"K", html:"这是子元素2中的内容"},
            {xtype:"panel", title:"L", html:"这是子元素3中的内容"}
        ]
    });
});


5 form Layout
Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，

这种布局主要用于在程序中创建表单字段或表单元素等使用。
hideLabels：tru表示隐藏标签，默认为false。
labelAlign：标签队齐方式left、right、center,默认为left。
在实际应用中，Ext.form.FormPanel这个类默认布局使用的是Form布局，因此我们直接使用FormPanel即

可。
Ext.onReady(
    function() {
        var panel = new Ext.Panel({
            layout:"form",
            title: "HelloWorld",
            renderTo:Ext.getDom("tt"),
            width: 400,
            height:250,
            frame: true,
            hideLabel: true,
            collapsible: true,
            bodyStyle: "padding:20px;",
            defaultType:"textfield",
            items:[
                {fieldLabel:"Hello"},
                {fieldLabel:"World"}
            ]
        });
    }
);

七,fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

例一：

 例二： 如果容器组件中有多个子元素，则只会显示一个元素，如下面的代码：

Js代码
Ext.onReady(function(){  
new Ext.Panel({  
        renderTo:"hello",  
        title:"容器组件",  
        layout:"fit",  
        width:500,  
        height:100,  
        items:[{title:"子元素1",html:"这是子元素1中的内容"},  
            {title:"子元素2",html:"这是子元素2中的内容"}  
        ]  
    });  
}); 

Ext.onReady(function(){
new Ext.Panel({
  renderTo:"hello",
  title:"容器组件",
  layout:"fit",
  width:500,
  height:100,
  items:[{title:"子元素1",html:"这是子元素1中的内容"},
   {title:"子元素2",html:"这是子元素2中的内容"}
  ]
 });
});

例三：如果不使用布局Fit，代码如下：

Js代码
Ext.onReady(function(){  
    new Ext.Panel({  
        renderTo:"hello",  
        title:"容器组件",  
        width:500,  
        height:200,  
        items:[{title:"子元素1",html:"这是子元素1中的内容"},  
                {title:"子元素2",html:"这是子元素2中的内容"}  
        ]  
    });  
}); 

Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"hello",
  title:"容器组件",
  width:500,
  height:200,
  items:[{title:"子元素1",html:"这是子元素1中的内容"},
    {title:"子元素2",html:"这是子元素2中的内容"}
  ]
 });
});

八、form 是一种专门用于管理表单中输入字段的布局
Js代码
Ext.onReady(function() {     
    var win = new Ext.Window({     
        title: "form Layout",     
        height: 150,     
        width: 230,     
        plain: true,     
        bodyStyle: 'padding:15px',     
        items:{     
            xtype: "form",     
            labelWidth: 30,     
            defaultType: "textfield",     
            frame:true,     
            items:[     
                {     
                    fieldLabel:"姓名",     
                    name:"username",     
                    allowBlank:false //必填项(非空)    
                },     
                {     
                    fieldLabel:"呢称",     
                    name:"nickname"     
                },     
                {     
                    fieldLabel: "生日",     
                    xtype:'datefield',     
                    name: "birthday",     
                    width:127    
                }     
            ]     
        }     
    });     
    win.show();     
}); 

Ext.onReady(function() {  
 var win = new Ext.Window({  
  title: "form Layout",  
  height: 150,  
  width: 230,  
  plain: true,  
  bodyStyle: 'padding:15px',  
  items:{  
   xtype: "form",  
   labelWidth: 30,  
   defaultType: "textfield",  
   frame:true,  
   items:[  
    {  
     fieldLabel:"姓名",  
     name:"username",  
     allowBlank:false //必填项(非空) 
    },  
    {  
     fieldLabel:"呢称",  
     name:"nickname"  
    },  
    {  
     fieldLabel: "生日",  
     xtype:'datefield',  
     name: "birthday",  
     width:127 
    }  
   ]  
  }  
 });  
 win.show();  
});

九、table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

例一：

Js代码
Ext.onReady(function(){     
    var panel=new Ext.Panel( {     
       renderTo:'hello',     
       title:'容器组件',     
       layout:'table',            
       width:500,     
       height:200,     
       layoutConfig:{columns:3},//将父容器分成3列     
       items:[     
        {title:'元素1',html:'ssssssssss',rowspan:2,height:100},     
        {title:'元素2',html:'dfffsddsdfsdf',colspan:2},     
        {title:'元素3',html:'sdfsdfsdf'},     
        {title:'元素4',html:''}     
       ]     
    });     
});   

Ext.onReady(function(){  
 var panel=new Ext.Panel( {  
       renderTo:'hello',  
       title:'容器组件',  
       layout:'table',         
       width:500,  
       height:200,  
       layoutConfig:{columns:3},//将父容器分成3列  
       items:[  
        {title:'元素1',html:'ssssssssss',rowspan:2,height:100},  
        {title:'元素2',html:'dfffsddsdfsdf',colspan:2},  
        {title:'元素3',html:'sdfsdfsdf'},  
        {title:'元素4',html:''}  
       ]  
 });  
}); 

Js代码
Ext.onReady(function(){  
    new Ext.Panel({  
        renderTo:"hello",  
        title:"容器组件",  
        layout:"fit",  
        width:500,  
        height:100,  
        items:[{title:"子元素",html:"这是子元素中的内容"}]  
    });  
});