Ext常用6大布局方式

前言：

只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局

简单说明最常用到的6种布局方式：

一.最简单的布局：FitLayout

     Javascript代码   
     
   
new Ext.Viewport({  
 layout:'fit',  
 items:[oGrid]  //oGrid是一个表格  
});  

注意：
1.使用Fit布局 items中只能有一个组件，如果你放置了多个组件，也只能是第一个用效。
2.使用Fit布局在组件中不能使用：autoHeight:true 否则会使FitLayout实效

二.最常用的布局：BorderLayout

     Javascript代码   
     
   
new Ext.Viewport({  
 layout:'border',  
 items:[  
 {region:'north',height:100},  
 {region:'south',height:100},  
 {region:'west',width:200},  
 {region:'east',width:200},  
 {region:'center'}  
]  
});  

注意：
1.center属性值必须指定
2.north,south 不要指定width
3.west,east不要指定height
4.不要使用autoHeight，autoWidth
5.添加split:true属性可以控制区域大小

三.表单布局：FormLayout

     Javascript代码   
     
   
new Ext.form.FormPanel({  
    layout:'form', //默认是FormLayout布局（可写可不写）  
    items:[{  
        xtype:'textfield'  
        fieldLabel:'名称',  
        name:'name',  
        anchor:'90%'  
    },{  
        xtype:'datefield',  
        fieldLabel:'生日',  
        name:'birthday',  
        anchor:'90%'  
    },{  
        xtype:'textfield',  
        fieldLabel:'性别',  
        name:'sex',  
        anchor:'90%'  
    }]  
});  

注意：
1.从上面的继承图可以看出FormLayout是AnchorLayout的子类，因此可以在里面使用anchor属性设置大小比例
2.FormLayout是FormPanel默认的布局方式，因此可以不显示写出Layout:'form'
3.fieldLabel，boxLabel在FormLayout布局情况下才能显示出来

四.列布局：ColumnLayout

     Javascript代码   
     
   
new Ext.Viewport({  
    layout:'column',  
    itmes:[{  
        title:'第一列',  
        columnWidth:.3   //30%  
    },{  
        title:'第二列',  
        columnWidht:.3  //30%  
    },{  
        title:'第三列',  
        columnWidth:.4  //40%  
    }]  
});  

注意：
1.items的每个子组件中的columnWidth加起来的和必须为1

五.控制大小布局：AnchorLayout

     Javas代码   
     
   
new Ext.Viewport({  
    layout:'anchor',  
    itmes:[{  
        title:'one',  
        anchor:'50% 60%'//表示所占宽度，高度的百分比  
    },{  
        title:'two',  
        anchor:'40%' //表示所占宽度，高度百分比都是40%  
    },{  
        title:'three',  
        anchor:'-20 -100' //表示距离右侧的20px,距离底部100px  
    },{  
        title:'four',  
        anchor:'-300'   //表示距离右侧，底部都为300px  
    }]  
});  

六.伸缩折叠布局：Accordion

     Javascript代码   
     
   
new Ext.Viewport({  
    layout:'border',  
    items:[{  
        region:'west',  
        width:200,  
        layout:'accordion', //伸缩折叠布局  
        layoutConfig:{  
            titleCollapse:true, //单击标题可以折叠  
            animate:true,  //展开折叠时的动画效果  
            activeOnTop:true,//展开的子面板的顺序总在最上面  
        },  
        items:[{  
            title:'第一栏',  
            html:'one'  
        },{  
            title:'第二栏',  
            html:'two'  
        },{  
            title:'第三栏',  
            html:'three'  
        },{  
            title:'第四栏',  
            html:'four'  
        }]  
  
    },{  
        region:'center',  
        split:true,  
        border:true  
    }]  
});  

注意：
1.使用Accordion布局一定要设置标题：title

2.与布局有关(所有布局方式都可以)的参数属性都可以写在layoutConfig:{}里面；

Ext常用6大布局方式

猜你喜欢