[转载]ExtJS3.0之布局一

1、Border 布局

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

/// <reference path="vswd-ext_2.0.2.js" />



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中的内容"}

        ] 

    });

});

    输出的结果如下图所示：