Ext Js简单容器常用布局的创建使用

在布局页面的时候，对于Ext Js提供了几种常用的布局方式，在一个容器中使用适当的布局方式进行适当的布局，对于继承自Ext.Container类的容器都可以使用这些布局，可以有很不错的效果。在上篇文章对于面板Panel的扩展练习Viewport容器中，使用了border和accordion两种布局方式结合做的效果。
通过设置容器的layout配置指定布局方式，常用布局方式：FitLayout(自适应)\BorderLayout(边界式)\CardLayout(卡片式)\Accordion(手风琴式)\TableLayout(表格式)\ColumnLayout(列式)\AnchorLayout(锚定)\FormLayout(表单式)

1.FitLayout(自适应)：对于只包含了一个组件的容器，这种布局使得内部组件撑满容器。这个布局没有配置选项。如果容器中有多个组件，所有的组件的尺寸都会设为相同，这一般来说都不是我们期望的行为，所以在fit布局的容器中，只能放一个子组件。

//创建fitLayOut布局
function fitLayout() {
    var myFitLayout = new Ext.Panel({
        title: "Fit Layout",
        layout: "fit",
        width: 300,
        height: 300,
        style: {
            width: '95%',
            marginBottom: '10px',
            color: "red",
            background: "blue"
        },
        items: [
                {
                    title: 'InnerPanelOne',
                    style: { background: "yellow", height: "100px" },
                    html: '<p>The Inner Panel ContentOne</p>',
                    border: true
                },
                {
                    title: "InnerPanelTwo",
                    style: { background: "Orange" },
                    html: "<p>The Inner Panel ContentTwo</p>",
                    border: true
                }
                ]
    });
    myFitLayout.render(Ext.getBody());
}

2.BorderLayout(边界式)：这是一种多窗口，面向应用的UI布局样式。支持多层嵌套面板，块于块之间自动的分界，支持某块区域的展开和缩起。通过border关键字来指定或者扩展，一般不用new关键字来创建。此布局内的空间被分为东南西北中五个区域。设定split属性为true，可以使某块区域能被resize。所有使用这种布局的容器，至少要指定一个子元素，来占据“中间”区域center。中间区域的子组件总是会撑满容器没有被设定的剩下区域。西侧或者东侧的子组件可以指定初始宽度，或者通过flex属性来指定宽度占比。同理，南北两侧的可以指定高度。可以用collapsible设定是否可以折叠。

function borderLayOut() {
    var myBorderLayout = new Ext.Panel({
        renderTo: document.body, width: 800, height: 600, title: "Border Layout", layout: "border",
        style: { marginTop: "10px", marginLeft: "50px", background: "Red" },
        items: [
                { title: "Border East", region: "east", width: 150, split: true, collapsible: true, layout: "fit",
                    style: { background: "Orange" }, html: "<h1>East模块！</h1>"
                },
                { title: "Border West", region: "west", width: 150, split: true, collapsible: true, layout: "fit",
                    style: { background: "Purple" }, html: "<h1>West模块<h1>"
                },
                { title: "Border South", region: "south", height: 80, split: true, minSize: 75, maxSize: 150,
                    style: { color: "Blue" }, html: "<h1>South模块</h1>"
                },
                { title: "Border North", region: "north", height: 100, split: true, minSize: 75, maxSize: 150,
                    style: { color: "Orange" }, html: "<h1>North模块</h1>"
                },
                { title: "Border Center", region: "center", layout: "fit",
                    style: { color: "orange" }, html: "<h1>Center模块，信息提示！</h1>"
                }
                ]
    });
}

3.CardLayout(卡片式)：这种布局形式，将容器内部子组件都撑满到容器的大小叠放，所以一次只能显示位于最上面的那个组件。这个布局方式，通常用来创建应用的向导程序。这种布局有个方法setActiveItem来决定显示哪个组件，参数是id或者下标。布局本身不提供UI来实现内部组件的导航，所以开发向导的时候，要自己开发导航按钮。

function cardLayOut() {
    var cardLayout = new Ext.Panel({
        title: "CardLayOut-Wizard", renderTo: Ext.getBody(),
        bodyStyle: "padding:15px", width: 300, defaults: { border: false }, //border应用于每个面板上
        layout: "card", activeItem: 0,
        bbar: [
                { id: "move-prev", text: "上一步", disabled: true,
                    handler: function () {
                        var id = cardLayout.layout.activeItem.id;
                        Ext.getCmp("move-next").setDisabled(false);
                        var tempArray = id.split('-');
                        if (tempArray[1] == 1) {
                            this.setDisabled(true);
                        }
                        var newID;
                        if (tempArray[1] != 0) {
                            newID = tempArray[0] + "-" + (parseInt(tempArray[1]) - 1);
                        }
                        cardLayout.layout.setActiveItem(newID);
                    }
                },
                "->", //贪婪分隔符，这样按钮就被对齐到边界处
                {
                id: "move-next", text: "下一步",
                handler: function () {
                    var id = cardLayout.layout.activeItem.id;
                    Ext.getCmp("move-prev").setDisabled(false);
                    var tempArray = id.split('-');
                    if (tempArray[1] == 1) {
                        this.setDisabled(true);

                    }

                    var newID;
                    if (tempArray[1] != 2) {
                        newID = tempArray[0] + "-" + (parseInt(tempArray[1]) + 1);
                    }
                    cardLayout.layout.setActiveItem(newID);
                }
            }
                ],
        items: [
            { id: "card-0", html: "<h1>Welcome To The Wizard!</h1><p>Step 1 Of 3</p>" },
            { id: "card-1", html: "<h1>Welcome To The Wizard!</h1><p>Step 2 Of 3</p>" },
            { id: "card-2", html: "<h1>Welcome To The Wizard!</h1><p>Step 3 Of 3</p>" }
            ]
    });
}

4.Accordion(手风琴式)：实现了一种让许多面板在垂直方向上可以折叠展开的布局方式。任意时刻，只能展开一个面板。折叠和展开的行为都是自动支持的，不需要额外的编程。只有Panel和Panel的子类才能用于使用了Accordion布局的容器内部子组件。

function accordinLayOut() {
    var accordionLayout = new Ext.Panel({
        title: "Accordion Layout", layout: "accordion", width: 260, height: 500, renderTo: Ext.getBody(),
        style: { marginTop: "10px", marginLeft: "100px" },
        defaults: { bodyStyle: { pandding: "15px", color: "Red", background: "Purple" }, border: false }, //应用每一个Panel
        layoutConfig: { titleCollapse: true, animate: true, activeTop: true }, //布局的相关配置
        items: [
                { title: "Panel One", html: "<p>我是Panel One!</p>" },
                { title: "Panel Two", html: "<p>我是Panel Two!</p>" },
                { title: "Panel Three", html: "<p>我是Panel Three!</p>" }
                ]
    });
}

5.TableLayout(表格式)：使界面按照HTML的table的形式来进行布局，可以指定总的列数，然后配合colspan和rowspan来生成复杂的表格结构。这个布局背后的思想就是一个table元素，所以，所有的注意点都跟table的注意点一样。该布局只需要指定列数column，然后会将其内子元素按照从左到右，从上到下的顺序排布在界面上。

function tableLayOut() {
    var tableLayout = new Ext.Panel({
        title: "Table LayOut", renderTo: Ext.getBody(), width: 500, height: 300, layout: "table",
        defaults: { bodyStyle: { padding: "20px"} }, layoutConfig: { columns: 3 },
        items: [
                { title: "Cell A", html: "<p>Cell A Content</p>", rowspan: 2, width: 100, height: 300, style: { color: "red" }, bodyStyle: { background: "purple", height: "100px"} },
                { title: "Cell B", html: "<p>Cell B Content</p>", colspan: 2 },
                { title: "Cell C", html: "<p>Cell C Content</p>", cellCls: "highlight" },
                { title: "Cell D", html: "<p>Cell D Content</p>" }
                ]
    });
}

6.ColumnLayout(列式)：对容器进行分栏布局，分栏的宽度可以用百分比，也可以用固定宽度。分栏的高度是可以根据内容来指定的。此布局本身没有什么配置选项，但是位于此布局中的面板，可以使用columnWidth属性来指定分栏宽度。在指定宽度的时候width属性和columnWidth属性都是有效的，width的值必须是大于1的整数，columnWidth的值是百分比，取值范围是0到1的左开右闭区间。
在渲染布局的时候，外层容器首先遍历内部宽度固定的面板，然后算出剩余没有分配的宽度，然后按照columnWidth所指定的百分比，分给其他面板。所以，此布局中所有使用columnWidht指定宽度的面板的columnWidth值之和必须是1，否则该布局的行为不可预期。

function columnLayOut() {
    var columnLayout = new Ext.Panel({
        title: "Column Layout-Mixed", width: 800, heiht: 300, renderTo: Ext.getBody(), layout: "column",
        items: [
                    { title: "Column One", width: 200, html: "Column One Content " },
                    { title: "Column Two", columnWidth: .8, html: "Column Two Content" }, //百分比 0.8
                    {title: "Column Three", columnWidth: .2, html: "Column Three Content " }
                ]
    });
}

7.AnchorLayout(锚定)：使包含的元素相对于容器的尺寸发生变化。如果容器被resize，那么内部包含的元素就会根据指定的规则来自动重绘。这种布局一般不使用new来创建，也没有直接的配置选项。此种布局没有任何直接的配置选项。缺省情况下，AnchorLayout基于应用容器的尺寸来计算锚定规则。使用AnchorLayout的容器，可以通过anchorSize属性来设定可供内含组建计算尺寸用的虚拟容器。

function anchorLayOut() {
    var anchorLayout = new Ext.Panel({
        title: "锚点布局", width: 500, height: 300, frame: true, autoScroll: true, layout: "anchor", renderTo: Ext.getBody(),
        defaults: { bodyStyle: 'background-color:Purple;padding:0px' }, style: { marginLeft: "100px" },
        items: [
        // { anchor: "30% 30%", title: "Panel One", html: "百分比(Percentage定位)", frame: true }, //百分比定位
                {anchor: "-30 0", title: "Panel Two", html: "偏移量(Offsets)定位", frame: true}  //偏移量定位
        //{anchor: "r b", title: "Panel Three", html: "参考边(side)定位", frame: true}         //参数边定位(右边和底部)
                ]
    });
}

8.FormLayout(表单式)：这种布局方式用于渲染表单域，表单域一个一个纵向排列并且会被拉长到填满容器的宽度。在这种布局内，内部元素上设定的padding值都会被忽略。

function formLayOut() {
    //可以创建Ext.form.FormPanel或指定layout:"form"
    var formLayout = new Ext.form.FormPanel({
        title: "Form Layout", renderTo: Ext.getBody(), width: 500, hidLables: false, labelAlign: "left", //'right'or 'top'
        labelWidth: 65, labelPad: 8, bodyStyle: "padding:15px", defaultType: "textfield",
        defaults: { width: 230, msgTarget: 'side' }, layoutConfig: { labelSeparator: '~' },
        labelSeparator: ":", //field的label显示分隔符,不需要使用""
        items: [
                        { fieldLabel: "First Name", name: "first", allowBlank: false, labelSeparator: ":" },
                        { fieldLabel: "Last Name", name: "last" },
                        { fieldLabel: "Email", name: "email", vtype: "email" },
                        { xtype: "textarea", fieldLabel: "Message", hideLabel: true, name: "msg", achor: "100% -53" }
                ],
        buttons: [
                { text: "Save" }, { text: "Cancel" }
                ]
    });
}

9.布局字符串和类的对应关系

以下是所有的布局字符串和类的对应关系，所有的布局类均继承自 Ext.layout.ContainerLayout类 

字符串            类                           中文名称
-------------    ------------------           ------------------
absolute         Ext.layout.absolute           绝对定位
accordion        Ext.layout.Accordion         手风琴式
anchor           Ext.layout.AnchorLayout       锚定
(新)auto         Ext.layout.auto               自动
border           Ext.layout.BorderLayout      边界式
card             Ext.layout.CardLayout        卡片式
column           Ext.layout.ColumnLayout        列式
fit              Ext.layout.FitLayout          自适应
form             Ext.layout.FormLayout          表单式
(新)hbox         Ext.layout.hbox               水平
(新)menu         Ext.layout.menu               菜单式
table            Ext.layout.TableLayout      表格式
(新)toolbar      Ext.layout.toolbar           工具条式
(新)vbox         Ext.layout.vbox                垂直

本文转自SanMaoSpace博客园博客，原文链接：http://www.cnblogs.com/SanMaoSpace/archive/2013/01/26/2877719.html，如需转载请自行联系原作者