Chinaunix首页 | 论坛 | 博客

acc

  • 博客访问: 791963
  • 博文数量: 170
  • 博客积分: 7011
  • 博客等级: 少将
  • 技术积分: 1660
  • 用 户 组: 普通用户
  • 注册时间: 2006-07-31 12:02
文章分类

全部博文(170)

文章存档

2014年(7)

2010年(2)

2009年(62)

2008年(25)

2007年(67)

2006年(7)

我的朋友

分类: Java

2009-09-03 09:57:03

1、Border 布局

   Border 布局由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置。看下面的代码:

 /// 

Ext.onReady(function(){
    new Ext.Viewport({
        layout:"border",
        items:[
            {
                region:"north",
                height:50,
                title:"顶部面板"},
            {
                region:"south",
                height:50,
                title:"底部面板"},
            {
                region:"center",
                title:"中央面板"},
            {
                region:"west",
                width:100,
                title:"左边面板"},
            {
                region:"east",
                width:100,
                title:"右边面板"}
            ]
    });
});

    执行上面的代码将会在页面中输出包含上下左右中五个区域的面板,如下图所示:

2、Column 布局

   Column 列布局由Ext.layout.ColumnLayout 类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth 或width 来指定子元素所占的列宽度。columnWidth 表示使用百分比的形式指定列宽度,而 width 则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面 的代码:

 Ext.onReady(function(){
    new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        layout:"column",
        width:500,
        height:100,
        items:[{title:"列1",width:100},
            {title:"列2",width:200},
            {title:"列3",width:100},
            {title:"列4",width:95}
            ]
    });
});

    上面的代码在容器组件中放入了四个元素,在容器组件中形成4 列,列的宽度分别为100,200,100 及剩余宽度,执行结果如下图所示。

   也可使用columnWidth 来定义子元素所占的列宽度,看下面的代码:

 Ext.onReady(function(){
    new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        layout:"column",
        width:500,
        height:100,
        items:[{title:"列1",columnWidth:.2},
            {title:"列2",columnWidth:.3},
            {title:"列3",columnWidth:.3},
            {title:"列4",columnWidth:.2}
            ]
    });
});

    注意columnWidth 的总和应该为1,执行代码将生成如下图所示的内容:

    在实际应用中还可以混合使用,看下面的代码:

 Ext.onReady(function(){
    new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        layout:"column",
        width:500,
        height:100,
        items:[{title:"列1",width:200},
            {title:"列2",columnWidth:.3},
            {title:"列3",columnWidth:.3},
            {title:"列4",columnWidth:.4}
            ]
    });
});

    执行上面的代码将会生成如下图所示的结果:

3、Fit 布局

    使用Fit 布局后的代码,如下:

 Ext.onReady(function(){
    new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        layout:"fit",
        width:500,
        height:100,
        items:[{title:"子元素",html:"这是子元素中的内容"}
        ]
    });
});

    上面的代码指定父容器使用Fit 布局,因此子将自动填满整个父容器。输出的图形如下:

    如果容器组件中有多个子元素,则只会显示一个元素,如下面的代码:

 Ext.onReady(function(){
    new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        layout:"fit",
        width:500,
        height:100,
        items:[{title:"子元素1",html:"这是子元素1中的内容"},
        {title:"子元素2",html:"这是子元素2中的内容"}
        ]
    });
});

    输出的结果如下:

    如果不使用布局Fit,代码如下:

 Ext.onReady(function(){
    new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        width:500,
        height:120,
        items:[{title:"子元素1",html:"这是子元素1中的内容"},
        {title:"子元素2",html:"这是子元素2中的内容"}
        ]
    });
});

    输出的结果如下图所示:

阅读(2738) | 评论(0) | 转发(0) |
0

上一篇:ExtJS3.0之对话框一

下一篇:ExtJS3.0之布局二

给主人留下些什么吧!~~