Sealyu

--- 博客已迁移至: http://www.sealyu.com/blog

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  618 随笔 :: 87 文章 :: 225 评论 :: 0 Trackbacks
ExtJs----布局(转)
布局概述


        
    在 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    },{
 7        title:'Column 2',
 8        columnWidth:.4    
 9    },{
10        title:'Column 3',
11        columnWidth:.35
12    }]
13});

表格状的布局TableLayout
 1    var viewport = new Ext.Viewport({
 2        layout:'fit',
 3        items:[{
 4            title:'Table Layout',
 5            layout:'table',
 6            defaults:{
 7                bodyStyle:'padding:20px'
 8            },
 9            layoutConfig:{
10                columns:3
11            },
12            items:[{
13                html:'<p>Cell A content</p>',
14                rowspan:2
15            },{
16                html:'<p>Cell A content</p>',
17                colspan:2            
18            },{
19                html:'<p>Cell C content</p>'
20            },{
21                html:'<p>Cell D content</p>'
22            }]
23        }]
24    });
25
posted on 2009-11-19 17:00 seal 阅读(876) 评论(0)  编辑  收藏 所属分类: EXTJS

只有注册用户登录后才能发表评论。
网站导航: