Extjs4的layout的9种布局样式风格

extjs 的容器组件都可以设置它的显示风格：它的有效值有：absolut、accordion、anchor、border、card、column、fit、form、table一共9种

absolute
顾名思义，在容器内部，根据指定的坐标定位显示 
accordion
这个是最容易记的，手风琴效果 

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:''}  
       ]  
      }  
     );  
});  

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();  
    });  

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

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

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
把整个容器看成一列,然后向容器放入子元素时 

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

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();  
    }); 

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:''}  
       ]  
      }  
     );  
});