布局概述


        
    
在EXT中,所有的布局都是从Ext.Container开始的,Ext.Container的父类是Ext.BoxComponent。Ext.BoxComponent是一个盒子组件,可以定义宽度,高度和位置等属性。作为子类,Ext.Container也继承了这些功能,更重要的是,Ext.Container可以使用layout和items属性未作内部的子组件进行布局。
    事实上,我们经常用来设置布局的子类也只有几个,比如用Ext.Viewport进行页面的整体布局,使用Ext.Panel和Ext.Window进行各种嵌套布局,使用Ext.form.FieldSet和Ext.form.FormPanel为表单进行布局。其余的子类都使用默认的渲染形式,很少进行内部布局。
    与Ext.Container相似,所有的布局类也有一个共同的超类Ext.layout.ContainerLayout。凡是继承该超类的子类都可以对Ext.Container和它的子类进行布局定义,这两颗继承树结合在一起便构成了EXT中完整的布局系统。

最简单的布局FitLayout
    
1var viewport = new Ext.Viewport({
2    layout:'fit',
3    items:[grid]
4}
)

    它可以自动适应页面大小的变化,填充整个页面。但如果在items中放入两个控件,会发现第二个控件没有任何效果。即FitLayout布局每次只能使用一个子组件。

常用的边框布局BorderLayout 

     它将整个布局区域分成了东、西、南、北、中5个部分,除了中间区域以外,其他的区域又都是可以省略的。

var viewport = new Ext.Viewport({
    layout:'border',
    items:[
        
{region:'north',html:'north'},
        
{region:'south',html:'south'},
        
{region:'east',html:'east'},
        
{region:'west',html:'west'},
        
{region:'center',html:'center'}
    ]
}
);

    重复一遍,center是绝对不能省的,否则会报错导致程序中断。
    在此布局中,north和south可以通过设置height来设置高度(也只能设置高度);west和east部分可以通过设置width来设置宽度(也只能设置宽度);同时,我们可以使用split来允许用户自行拖放以改变某一个区域的大小。如:

1var viewport = new Ext.Viewport({
2    layout:'border',
3    items:[
4        {region:'north',html:'north'},
5        {region:'west',html:'west',width:100,split:true},
6        {region:'center',html:'center'}
7    ]
8}
)

    当然,在使用split属性时,我们也可以搭配minSize和MaxSize属性来控制最小高度和最大高度。
    使用collapsible:true激活了区域的折叠功能,这需要搭配title参数一起使用。

制作伸缩菜单的布局----Accordion   
   
 1var viewport = new Ext.Viewport({
 2    layout:'border',
 3    items:[{
 4        region:'west',
 5        width:200,
 6        layout:'accordion',
 7        layoutConfig:{
 8            titleCollapse:true,
 9            animate:true,
10            activeOnTop:false
11        }
,
12        items:[{
13            title:'第一栏',
14            html:'第一栏'
15        }
,{
16            title:'第二栏',
17            html:'第二栏'
18        }
,{
19            title:'第三栏',
20            html:'第三栏'
21        }
]
22    }
,{
23        region:'center',
24        split:true,
25        border:true
26    }
]
27}
);
    
实现操作向导的布局----CardLayout
    
   
CardLayout可以看做是一叠卡片,从上面看起来就像是一张卡片,可以把中间的卡片抽出来,放到最上面,可以每次只能看到一张卡片。
 1var viewport = new Ext.Viewport({
 2    layout:'border',
 3    items:[{
 4        region:'west',
 5        id:'wizard',
 6        width:200,
 7        title:'某某向导',
 8        layout:'card',
 9        activeItem:0,
10        bodyStyle:'padding:15px',
11        defaults:{
12            border:false
13        }
,
14        bbar:[{
15            id:'move-prev',
16            text:'上一步',
17            handler:navHandler.createDelegate(this,[-1]),
18            disalbed:true
19        }
,'->',{
20            id:'move-next',
21            text:'下一步',
22            handler:navHandler.createDelegate(this,[1])
23        }
],
24        items:[{
25            id:'card-0',
26            html:'<h1>哈哈!<br/>欢迎用咱的向导。</h1><p>第一步,一共三步</p>'
27        }
,{
28            id:'card-1',
29            html:'<p>第二步,一共三步</p>'
30        }
,{
31            id:'card-2',
32            html:'<h1>恭喜恭喜,完成了</p>'
33        }
]
34    }
,{
35        region:'center',
36        split:true,
37        border:true
38    }
]
39}
);
40

    示例代码实现了大致的逻辑,但控制上下页翻页的代码(handler)未详细给出。

控制位置和大小的布局----AnchorLayout和AbsoluteLayout
   
AnchorLayout提供了一种灵活的布局方式,即可以为item中的每个组件指定与总体布局大小的差值,也可以设置一个比例使子组件可以根据整体自行计算本身的大小。它为我们提供给了三种配置方式。
    第一种方式是使用百分比进行配置,我们可以设置某一个子组件占整体长和宽的百分比。如:
 1    var viewport = new Ext.Viewport({
 2        layout:'anchor',
 3        items:[{
 4            title:'panel 1',
 5            html:'panel 1',
 6            anchor:'50% 50%'
 7        }
,{
 8            title:'panel 2',
 9            html:'panel 2',
10            anchor:'80%'
11        }
]
12    }
);

    第二种方式是直接设置与右侧和底部的边距,如:
 1    var viewport = new Ext.Viewport({
 2        layout:'anchor',
 3        items:[{
 4            title:'panel 1',
 5            html:'panel 1',
 6            anchor:'-50 -200'
 7        }
,{
 8            title:'panel 2',
 9            html:'panel 2',
10            anchor:'-100'
11        }
]
12    }
);
13});

    第三种方式称为side。使用它的前提是:为作为布局整体的父组件和布局内部的子组件都设置好width、height和anchorSize属性。AnchorLayout会记录布局整体与子组件的大小上的差值,为以后调整布局提供依据。

 1    var viewport = new Ext.Viewport({
 2        layout:'anchor',
 3        anchorSize:{width:400,height:300}
 4        items:[{
 5            title:'panel 1',
 6            html:'panel 1',
 7            width:200,
 8            height:100,
 9            anchor:'r b'
10        }
,{
11            title:'panel 2',
12            html:'panel 2',
13            width:100,
14            height:200,
15            anchor:'r b'
16        }
]
17    }
);
    
    我们为Viewport设置了anchorSize,这是一个包含宽度和高度信息的JSON对象,以此作为以后计算差值的基准。然后在panel 1和panel 2中设置宽度和高度的信息。anchor的设置只有anchor:'r b'一种,这是固定的写法,也可以写成anchor:'right buttom',两种写法完全相同。
    AbsoluteLayout是AnchorLayout的一个子类,继承了AnchorLayout的所有特性。AnchorLayout布局下的子组件都是自上而下竖直排列的,不能控制每个组件的位置,而AbsolutLayout可以通过设置x,y参数达到控制子组件位置的效果。

表单专用的布局FormLayout
   
FormLayout也是AnchorLayout的一个子类,可以再它里面使用anchor设置宽和高的比例。但是它主要还是用于对表单进行布局。首先要明白一点,Ext.form.FormPanel使用它作为默认的布局方式。也正因为使用了FormLayout布局,我们设置的fieldLabel、boxLabel才能显示出来,而FormLayout里也提供给了一系列的参数来控制这些显示效果。
    hideLabels:是否隐藏field的标签
    itemCls:表单显示的样式
    labelAlign:标签的对齐方式
    labelPad:标签空白的像素值
    labelWidth:标签宽度
    clearCls:清除div渲染的CSS样式
    fieldLabel:对应field的标签内容
    hideLabel:是否隐藏标签
    itemCls:Field的CSS样式
    labelSeparator:标签和field之间的分隔,默认是:
    labelStyle:标签的CSS样式

分列式的布局ColumnLayout
 1var viewport = new Ext.Viewport({
 2
    layout:'column',
 3    items:[
{
 4        title:'Column 1
',
 5        columnWidth:.25

 6    }
,<span style
分享到:
评论