ExtJs的layout的12种风格

extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。
另外几种见：
http://www.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html
里面有详细的例子。


absolute 顾名思义，在容器内部，根据指定的坐标定位显示

a ccordion 这个是最容易记的，手风琴效果

Java 代码
Ext.onReady(function(){ 
var panel=new Ext.Panel(//Ext.formPanel 就是Panel中用了form布局 
      { 
       renderTo:'paneldiv', 
       title:'容器组件', 
       layout:'accordion',        
       width:500, 
       height:200, 
       layoutConfig:{animate:false}, 
       items:[ 
        {title:'元素1',html:''}, 
        {title:'元素2',html:''}, 
        {title:'元素3',html:''}, 
        {title:'元素4',html:''} 
       ] 
      } 
     ); 
}); 
Ext.OnReady(function(){
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'accordion',      
       width:500,
       height:200,
       layoutConfig:{animate:false},
       items:[
        {title:'元素1',html:''},
        {title:'元素2',html:''},
        {title:'元素3',html:''},
        {title:'元素4',html:''}
       ]
      }
     );
});


anchor 这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值

Java 代码
Ext.onReady(function() { 
        var panel1 = new Ext.Panel({ 
            title: "panel1", 
            height: 100, 
            anchor: '-50', 
            html: "高度等于100，宽度=容器宽度-50" 
        }); 
 
        var panel2 = new Ext.Panel({ 
            title: "panel2", 
            height: 100, 
            anchor: '50%', 
            html: "高度等于100,宽度=容器宽度的50%" 
 
        }); 
 
        var panel3 = new Ext.Panel({ 
            title: "panel3", 
            anchor: '-10, -250', 
            html: "宽度=容器宽度-10,高度=容器宽度-250" 
 
        }); 
 
        var win = new Ext.Window({ 
            title: "Anchor Layout", 
            height: 400, 
            width: 400, 
            plain: true,                     
            layout: 'anchor', 
            items: [panel1, panel2,panel3]             
        }); 
        win.show(); 
    }); 
Ext.onReady(function() {
        var panel1 = new Ext.Panel({
            title: "panel1",
            height: 100,
            anchor: '-50',
            html: "高度等于100，宽度=容器宽度-50"
        });

        var panel2 = new Ext.Panel({
            title: "panel2",
            height: 100,
            anchor: '50%',
            html: "高度等于100,宽度=容器宽度的50%"

        });

        var panel3 = new Ext.Panel({
            title: "panel3",
            anchor: '-10, -250',
            html: "宽度=容器宽度-10,高度=容器宽度-250"

        });

        var win = new Ext.Window({
            title: "Anchor Layout",
            height: 400,
            width: 400,
            plain: true,                   
            layout: 'anchor',
            items: [panel1, panel2,panel3]           
        });
        win.show();
    });


border 将容器分为五个区域:east,south,west,north,center

Java 代码
Ext.onReady(function() {      
 
        var button = Ext.get('show-btn'); 
        var win; 
         
        button.on('click', function() { 
 
            //创建TabPanel 
            var tabs = new Ext.TabPanel({ 
                region: 'center', //border 布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间 
                margins: '3 3 3 0', 
                activeTab: 0, 
                defaults: { 
                    autoScroll: true 
                }, 
                items: [{ 
                    title: 'Bogus Tab', 
                    html: "第一个Tab的内容." 
                }, { 
                    title: 'Another Tab', 
                    html: "我是另一个Tab" 
                }, { 
                    title: 'Closable Tab', 
                    html: "这是一个可以关闭的Tab", 
                    closable: true 
}] 
                }); 
 
                //定义一个Panel 
                var nav = new Ext.Panel({ 
                    title: 'Navigation', 
                    region: 'west', //放在西边，即左侧 
                    split: true, 
                    width: 200, 
                    collapsible: true, //允许伸缩 
                    margins: '3 0 3 3', 
                    cmargins: '3 3 3 3' 
                }); 
 
                //如果窗口第一次被打开时才创建 
                if (!win) { 
                    win = new Ext.Window({ 
                        title: 'Layout Window', 
                        closable: true, 
                        width: 600, 
                        height: 350, 
                        border : false, 
                        plain: true, 
                        layout: 'border', 
                        closeAction:'hide', 
                        items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局 
                    }); 
                } 
                win.show(button); 
            }); 
        }); 
Ext.onReady(function() {    

        var button = Ext.get('show-btn');
        var win;
       
        button.on('click', function() {

            //创建TabPanel
            var tabs = new Ext.TabPanel({
                region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
                margins: '3 3 3 0',
                activeTab: 0,
                defaults: {
                    autoScroll: true
                },
                items: [{
                    title: 'Bogus Tab',
                    html: "第一个Tab的内容."
                }, {
                    title: 'Another Tab',
                    html: "我是另一个Tab"
                }, {
                    title: 'Closable Tab',
                    html: "这是一个可以关闭的Tab",
                    closable: true
}]
                });

                //定义一个Panel
                var nav = new Ext.Panel({
                    title: 'Navigation',
                    region: 'west', //放在西边，即左侧
                    split: true,
                    width: 200,
                    collapsible: true, //允许伸缩
                    margins: '3 0 3 3',
                    cmargins: '3 3 3 3'
                });

                //如果窗口第一次被打开时才创建
                if (!win) {
                    win = new Ext.Window({
                        title: 'Layout Window',
                        closable: true,
                        width: 600,
                        height: 350,
                        border : false,
                        plain: true,
                        layout: 'border',
                        closeAction:'hide',
                        items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
                    });
                }
                win.show(button);
            });
        });


card 像安装向导一样，一张一张显示

Java 代码
Ext.onReady(function() { 
 
        var i = 0; 
 
        var navHandler = function(direction) { 
            if (direction == -1) { 
                i--; 
                if (i < 0) { i = 0; } 
            } 
 
            if (direction == 1) { 
                i++; 
                if (i > 2) { i = 2; return false; } 
            } 
 
 
            var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1]; 
            var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0]; 
 
            if (i == 0) { 
                btnBack.disabled = true; 
            } 
            else { 
                btnBack.disabled = false; 
            } 
 
            if (i == 2) { 
                btnNext.value = "完成"; 
                btnNext.disabled = true; 
            } 
            else { 
                btnNext.value = "下一步"; 
                btnNext.disabled = false; 
            } 
 
            card.getLayout().setActiveItem(i); 
 
        }; 
 
 
        var card = new Ext.Panel({ 
            width: 200, 
            height: 200, 
            title: '注册向导', 
            layout: 'card', 
            activeItem: 0, // make sure the active item is set on the container config! 
            bodyStyle: 'padding:15px', 
            defaults: { 
                border: false 
            }, 
            bbar: [ 
                { 
                    id: 'move-prev', 
                    text: '上一步', 
                    handler: navHandler.createDelegate(this, [-1])                     
                }, 
                '->', 
                { 
                    id: 'move-next', 
                    text: '下一步', 
                    handler: navHandler.createDelegate(this, [1]) 
                } 
            ], 
 
            items: [{ 
                id: 'card-0', 
                html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3< /p>' 
            }, { 
                id: 'card-1', 
                html: '<h1>请填写注册资料!</h1><p>Step 2 of 3< /p>' 
            }, { 
                id: 'card-2', 
                html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>' 
}], 
 
                renderTo: "container" 
            }); 
 
 
 
        }); 
Ext.onReady(function() {

        var i = 0;

        var navHandler = function(direction) {
            if (direction == -1) {
                i--;
                if (i < 0) { i = 0; }
            }

            if (direction == 1) {
                i++;
                if (i > 2) { i = 2; return false; }
            }


            var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
            var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];

            if (i == 0) {
                btnBack.disabled = true;
            }
            else {
                btnBack.disabled = false;
            }

            if (i == 2) {
                btnNext.value = "完成";
                btnNext.disabled = true;
            }
            else {
                btnNext.value = "下一步";
                btnNext.disabled = false;
            }

            card.getLayout().setActiveItem(i);

        };


        var card = new Ext.Panel({
            width: 200,
            height: 200,
            title: '注册向导',
            layout: 'card',
            activeItem: 0, // make sure the active item is set on the container config!
            bodyStyle: 'padding:15px',
            defaults: {
                border: false
            },
            bbar: [
                {
                    id: 'move-prev',
                    text: '上一步',
                    handler: navHandler.createDelegate(this, [-1])                   
                },
                '->',
                {
                    id: 'move-next',
                    text: '下一步',
                    handler: navHandler.createDelegate(this, [1])
                }
            ],

            items: [{
                id: 'card-0',
                html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
            }, {
                id: 'card-1',
                html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
            }, {
                id: 'card-2',
                html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
}],

                renderTo: "container"
            });



        });


column 把整个容器看成一列,然后向容器放入子元素时

Java 代码
Ext.onReady(function() { 
        var win = new Ext.Window({ 
            title: "Column Layout", 
            height: 300, 
            width: 400, 
            plain: true, 
            layout: 'column', 
            items: [{ 
                title:"width=50%", 
                columnWidth:0.5, 
                html:"width=(容器宽度-容器内其它组件固定宽度)*50%", 
                height:200 
            }, 
            { 
                title:"width=250px", 
                width: 200, 
                height:100, 
                html:"固定宽度为250px" 
            }             
            ] 
        }); 
        win.show(); 
    }); 
Ext.onReady(function() {
        var win = new Ext.Window({
            title: "Column Layout",
            height: 300,
            width: 400,
            plain: true,
            layout: 'column',
            items: [{
                title:"width=50%",
                columnWidth:0.5,
                html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
                height:200
            },
            {
                title:"width=250px",
                width: 200,
                height:100,
                html:"固定宽度为250px"
            }           
            ]
        });
        win.show();
    });


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

Java 代码
Ext.onReady(function(){ 
var panel=new Ext.Panel( 
      { 
       renderTo:'paneldiv', 
       title:'容器组件', 
       layout:'fit', 
       width:500, 
       height:100, 
       items:[ 
        {title:'子元素1'}, 
        {title:'子元素2'}, 
        {title:'子元素3'}, 
        {title:'子元素4'}, 
        {title:'子元素5'} 
       ] 
      } 
     ); 
}); 
Ext.OnReady(function(){
var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'fit',
       width:500,
       height:100,
       items:[
        {title:'子元素1'},
        {title:'子元素2'},
        {title:'子元素3'},
        {title:'子元素4'},
        {title:'子元素5'}
       ]
      }
     );
});
form 是一种专门用于管理表单中输入字段的布局

Java 代码
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列

Java 代码
Ext.onReady(function(){ 
var panel=new Ext.Panel( 
      { 
       renderTo:'paneldiv', 
       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:'paneldiv',
       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:''}
       ]
      }
     );
});