1、Border 布局

   Border 布局由類Ext.layout.BorderLayout定義，布局名稱為border。該布局把容器分成東南西北中五個區(qū)域， 分別由east，south, west，north, cente來表示，在往容器中添加子元素的時候，我們只需要指定這些子元素 所在的位置，Border布局會自動把子元素放到布局指定的位置?？聪旅娴拇a：

/// <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:"右邊面板"}

            ]

    });

});

    執(zhí)行上面的代碼將會在頁面中輸出包含上下左右中五個區(qū)域的面板，如下圖所示：

2、Column 布局

   Column 列布局由Ext.layout.ColumnLayout 類定義，名稱為column。列布局把整個容器 組件看成一列，然后往里面放入子元素的時候，可以通過在子元素中指定使用columnWidth 或width 來指定子元素所占的列寬度。columnWidth 表示使用百分比的形式指定列寬度，而 width 則是使用絕對象素的方式指定列寬度，在實際應(yīng)用中可以混合使用兩種方式?？聪旅?的代碼：

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 及剩余寬度，執(zhí)行結(jié)果如下圖所示。

   也可使用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 的總和應(yīng)該為1，執(zhí)行代碼將生成如下圖所示的內(nèi)容：

    在實際應(yīng)用中還可以混合使用，看下面的代碼：

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}

            ] 

    });

});

    執(zhí)行上面的代碼將會生成如下圖所示的結(jié)果：

3、Fit 布局

    使用Fit 布局后的代碼，如下：

Ext.onReady(function(){

    new Ext.Panel({

        renderTo:"hello",

        title:"容器組件",

        layout:"fit",

        width:500,

        height:100,

        items:[{title:"子元素",html:"這是子元素中的內(nèi)容"}

        ] 

    });

});

    上面的代碼指定父容器使用Fit 布局，因此子將自動填滿整個父容器。輸出的圖形如下：

    如果容器組件中有多個子元素，則只會顯示一個元素，如下面的代碼：

Ext.onReady(function(){

    new Ext.Panel({

        renderTo:"hello",

        title:"容器組件",

        layout:"fit",

        width:500,

        height:100,

        items:[{title:"子元素1",html:"這是子元素1中的內(nèi)容"},

        {title:"子元素2",html:"這是子元素2中的內(nèi)容"}

        ] 

    });

});

    輸出的結(jié)果如下：

    如果不使用布局Fit，代碼如下：

Ext.onReady(function(){

    new Ext.Panel({

        renderTo:"hello",

        title:"容器組件",

        width:500,

        height:120,

        items:[{title:"子元素1",html:"這是子元素1中的內(nèi)容"},

        {title:"子元素2",html:"這是子元素2中的內(nèi)容"}

        ] 

    });

});

    輸出的結(jié)果如下圖所示：