EXT7大布局解析

1anchor:其值可以使百分比和数值，数值一般为负数，其代表的意思是如果宽度和长度中有一个设定值了，则anchor代表的是未设置的那个，如果两者都没有设定具体值，则如果需要使用anchor则需要anchro:'ww,hh'

Ext.onReady(function() {  

       Ext.create('Ext.Window',{
        title:'Anchor layout',
        width:400,
        height:400,
        layout:'anchor',
        plain: true,
        items:[
            Ext.create('Ext.panel.Panel',{
                title:'panel1',
                height:100,
                anchor:'-50',
                html:'高度等于100，宽度= 容器宽度-50'
            }),
            Ext.create('Ext.panel.Panel',{
                title:'panel2',
                height:100,
                anchor:'50%',
                html:'高度等于100，宽度=容器的宽度*50%'
            }),
            Ext.create('Ext.panel.Panel',{
                title:'panel3',
                anchor:'-10,-200',
                html:'高度等于容器高度-10,宽度等于容器宽度-200'
            })
        ]
        
    }).show();
    });

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

Ext.onReady(function(){
         var tab = Ext.create('Ext.tab.Panel',{
        region:'center',//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间  
        margins:'3,3,3,0',
        activeTab:0,
        defaults:{
            autoScroll:true
        },
        items:[{
            title:'tab1',
            html:'第一个tab内容'
        },{
            title:'tab2',
            html:'第二个tab内容'
        },{
            title:'tab3',
            html:'第三个tab内容'
        }]
        
    })
    var nav = Ext.create('Ext.panel.Panel',{
        title:'navigation',
        region:'west',
        split:true,
        width:200,
        collapsible:true,//允许伸缩
        margins:'3,0,3,3',
        cmargins:'3,3,3,'
    });
    Ext.create('Ext.Window',{
        title:'Layout Window',
        width:600,
        height:350,
        closable:true,
        border:false,
        plain:true,
        layout:'border',
        closeAction:'hide',
        items:[nav,tab]
    }).show();
)};
3.accordion:这个风格是手风琴式的，效果是如果 有多个item，则点击其中一个，则展开，其他的则收缩。
Ext.OnReady(function(){  
     Ext.create('Ext.panel.Panel',{
        title:'容器组件',
        layout:'accordion',
        width:600,
        height:200,
        layoutConfig:{animate:false},
        items:[{
           title:'元素1',html:''
        },{
           title:'元素2',html:''
        },{
           title:'元素3',html:''
        },{
           title:'元素4',html:''
        }]
        
    });
});

4card:像安装向导一样，一张一张显示
Ext.onReady(function(){
    var navigate = function(panel,direction){
        var layout = panel.getLayout();
        layout[direction]();
        Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
        Ext.getCmp('move-next').setDisabled(!layout.getNext());
    };
    Ext.create('Ext.panel.Panel',{
                title:'Example Wizard',
                height:500,
                width:400,
                layout: 'card',
                activeItem:0,
                bodyStyle:'padding:15px',
                animCollapse:true,
                renderTo:Ext.getBody(),
                defaults:{
                        // applied to each contained panel
                    border: false
                   },
                bbar:[{
                    id:'move-prev',
                    text:'back',
                    handler:function(btn){
                        navigate(btn.up("panel"),"prev");
                    },
                    disabled:true
                },'->',{
                    id:'move-next',
                    text:"next",
                    handler:function(btn){
                        navigate(btn.up("panel"),"next");
                    }
                }],
                items:[{
                    id:'card-0',
                    html:'<h1>Welcome to the Wizard!</h1>'
                },{
                    id:'card-1',
                    html:'<p>step 2 of 3 </p>'
                },{
                    id:'card-2',
                    html:'<h1>Congratulations!</h1><p>Step 3 of  3-complete</p>'
                }]
            });
});
5是一种专门用于管理表单中输入字段的布局
Ext.onReady(function() {  
        var win = Ext.create('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();  
    });  
6column:把整个容器看成一列,然后向容器放入子元素时
Ext.onReady(function() {  
        var win = Ext.create('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();  
    });  
7fit:填充整个容器（如果多个子元素则只有一个元素充满整个容器）
Ext.OnReady(function(){  
   Ext.create(Ext.create(Ext.panel.Panel',  
      {  
       renderTo:'paneldiv',  
       title:'容器组件',  
       layout:'fit',  
       width:500,  
       height:100,  
       items:[  
        {title:'子元素1'},  
        {title:'子元素2'},  
        {title:'子元素3'},  
        {title:'子元素4'},  
        {title:'子元素5'}  
       ]  
      }  
     );  
});