ExtJs常用layout布局整理

前言

    ExtJs常见的布局方式有：border 、form、absolute、column、accordion、table、fit、card、anchor
    另外，不常见的布局有：tab、vbox、hbox
    这些布局可以快速的帮助我们进行网页搭建
简介：
    最常用的边框布局——BorderLayout
    最简单的布局——FitLayout
    制作伸缩菜单的布局——Accordion
    实现操作向导的布局——CardLayout
    控制位置和大小的布局——AbsoluteLayout
    表单专用的布局——FormLayout
    分列布局——ColumnLayout
    表格状布局——TabelLayout
    BoxLayout——HBox
    BoxLayout——VBox

一、border 布局

    简介：也称边界布局、方位布局。该布局把容器分为东、南、西、北、中五个区域,分别由east、south、west、north、center表示。我们需要在items中使用region参数来给它定位。

    注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。center区域必须有，且它的大小是在其他4个部分设置好以后自动计算出来的，所以不能为它指定宽度值或高度值。
    实例：

var borderPanel = new Ext.Panel({
    renderTo: 'borderDiv',
    layout: 'border',
    tltle: 'Border Layout',
    width: 1000,
    height: 800,
    defaults: {
        collapsible: true, // 支持该区域的展开和折叠
        split: true, // 支持用户拖放改变该区域的大小
        bodyStyle: 'padding:15px'
    },
    items: [{
        title: 'Footer-s',
        region: 'south',
        height: 100,
        minSize: 75,
        maxSize: 250,
        html: '这是南边区域 south'

    }, {
        titlr: 'Main Content-c',
        region: 'center',
        collapsible: false,
        html: '这是中间区域 center'
    }, {
        title: 'Navigation-w',
        region: 'west',
        width: 150,
        minSize: 100,
        maxSize: 250,
        html: '这是西边区域 west'
    }, {
        title: 'North',
        region: 'north',
        height: 100,
        html: '这是北边区域 north'
    }, {
        title: 'East',
        region: 'east',
        width: 150,
        html: '这是东边区域 east'
    }]
});</span>

    运行结果:

二、form 布局

    简介：也称表单布局。是一种专门用于管理表单中输入字段的布局,这种布局在程序中主要用于创建表单字段或表单元素使用。
    注意：子组件垂直排放,它可以是一种布局样式，也可以是一个组件。也就是说既可以layout : ‘form’也可以new Ext.FormPanel 来使用它。区别就是对于 Panel 我们配置了 layout 为 form ，而对于 FormPanel 它默认的布局就是form布局，所以对于习惯于用 Panel 而不习惯用 FormPanel 的朋友尽管用Panel,但是一定要考虑好提交的问题，如果使用 panel 的话，要做提交可是要一个个获得控件的值的，而 FromPanel 则不需要。
    实例：

var formPanel = new Ext.FormPanel({
    renderTo: 'formDiv',
    width: 500,
    height: 300,
    labelWidth: 80,
    defaultType: 'textfield',
    frame: true,
    items: [{
        fieldLabel: '用户名',
        name: 'username'
    }, {
        fieldLabel: '密码',
        name: 'password'
    }, {
        fieldLabel: '日期',
        name: 'date',
        xtype: 'datefield',
    }]
});</span>

    运行结果:

三、absolute 布局

    简介：也称绝对定位布局。该布局使用很简单粗暴，直接给出其x、y值来定位即可。
    注意： x、y值是相对其父容器而言，从左上角（0,0）开始计算。
    实例：

var absolutePanel = new Ext.Panel({
    renderTo: 'absoluteDiv',
    layout: 'absolute',
    title: 'Absolute Layout',
    width: 500,
    height: 300,
    items: [{
        title: 'panel-1',
        x: 50,
        y: 50,
        html: 'x:50,y:50'
    }, {
        title: 'panel-2',
        x: 100,
        y: 100,
        html: 'x:100,y:100',
    }]
});</span>

    运行结果:

四、column 布局

    简介：也称列布局。该布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过子元素制定columnWidth和width来制定列的宽度,columnWidth是按百分比来制定列的宽度,width是按照绝对像素来制定列的宽度。在实际应用中可以两种混合使用。
    注意：该布局的子面板的所有columnWidth值必须在0~1之间或者是百分比。columnWidth值的总和应该为1，即100%。另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。
    实例：

var columnPanel = new Ext.Panel({
    renderTo: 'columnDiv',
    layout: 'column',
    width: 500,
    height: 300,
    items: [{
        title: 'Width = 25%',
        columWidth: .25,
        html: '111111111111'
    }, {
        title: 'Width = 75%',
        columnWidth: .75,
        html: '111111111111'
    }, {
        title: 'Width = 200px',
        width: 200,
        html: '111111111111'
    }]
});</span>

    运行结果:

五、accordion 布局

    简介：也称可折叠布局、手风琴布局。该布局的容器的子元素是可折叠的形式表现。
    注意：只有Ext.Panels和所有Ext.panel.Panel子项，才可以使用accordion布局。
    实例：

var accordionPanel = new Ext.Panel({
   renderTo: 'accordionDiv',
   layout: 'accordion',
   title: 'Accordion Layout',
   width: 500,
   height: 300,
   layoutConfig: {animate: false},
   items: [{
       title: 'panel-1', html: 'hello accordion'
   }, {
       title: 'panel-2', html: '<p>段落</p>'
   }, {
       title: 'panel-3',
       html: '<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>'
   }, {
       title: 'panel-4', html: '<button>按钮</button>'
   }]
});</span>

    运行结果:

六、table 布局

    简介：也称表格布局。按照普通表格的方法布局子元素，用layoutConfig:{columns:3} ,将父容器分成3列。它的item可配置的参数有：rowspan 合并的行数；colspan合并的列数。
    **注意：**table布局本身并没有什么特殊功能，它所实现的效果其实完全可以用 border 布局和 column 布局等方式代替，而且这些布局方式更灵活。
    实例：

<pre name="code" class="javascript">var tablePanel = new Ext.Panel({
    renderTo: 'tableDiv',
    width: 500,
    height: 300,
    layout: 'table',
    layoutConfig: {columns: 3},//定义了一共要分3列
    items: [
        {title: 'panel-1', html: '1111111111',rowspan:2},//合并了2行
        {title: 'panel-2', html: '2222222222',colspan:2},//合并了2列
        {title: 'panel-3', html: '3333333333'},
        {title: 'panel-4', html: '4444444444'}
    ]
});

    运行结果:

七、fit 布局

    简介：也称自适应布局。子元素将自动填满整个父容器。
    注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。
    实例：

var fitPanel = new Ext.Panel({
    renderTo: 'fitDiv',
    layout: 'fit',
    width: 500,
    height: 300,
    items: [{
        title: 'Fit Panel',
        html: '111111111111'
    }]
});</span>

    运行结果:

八、card 布局

    简介：也称卡牌布局、卡片式布局。该布局最TMD麻烦了。这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分步提交。
    注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。可以通过调用 setActiveItem( ) 函数来实现跳转。由于只有一个面板处于显示状态，那么在初始时，我们可以使用 activeItem： 属性来指定某一个面板的显示。对了，如果Ext-4 之后的版本就不是这样操作了。
    实例：

// card布局所需要的跳转方法-setActiveItem
var i=0;
var navHandler = function(direction){

    if (direction == -1){
        i--;
        if (i < 0) { i = 0;}
    }
    if (direction == 1){
        i++;
        if (i > 2) { i = 2; return false;}
    }
    cardPanel.getLayout().setActiveItem(i);
};

var cardPanel = new Ext.Panel({
    renderTo: 'cardDiv',
    layout: 'card',
    title:'注册向导',
    width: 500,
    height: 300,
    activeItem: 0,
    bodyStyle:'padding:15px',
    defaults:{
        border:false
    },
    bbar: [ {
        id: 'move-prev',
        text: '«Previous',
        handler:navHandler.createDelegate(this,[-1])
    },'->', {
        id: 'move-next',
        text: 'Next »',
        handler:navHandler.createDelegate(this,[1])
    }],
    items: [{
        id: 'card-0',
        html: '<h1>欢迎来到注册向导！</h1><p>Step 1 of 3</p>'
    }, {
        id: 'card-1',
        html: '<h1>请填写注册资料！</h1><p>Step 2 of 3</p>'
    }, {
        id: 'card-2',
        html: '<h1>注册成功！</h1><p>Step 3 of 3 - Complete</p>'
    }]
});</span>

    运行结果:

九、anchor 布局

    简介：也称锚点布局。感觉无卵用， anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
    **注意：**anchor属性为一组字符串，可以使用百分比或者是-数字（注意前面是有负号的，即数字为负数）来表示，字符串之间用空格隔开。
    实例：

var anchorPanel = new Ext.Panel({
    renderTo: 'anchorDiv',
    layout: 'anchor',
    title: 'Anchor Layout',
    width: 500,
    height: 300,
    items: [{
        title: 'panel-1',
        height: 100,
        anchor: '-50',
        html: '高度等于100，宽度 = 容器宽度 - 50'
    }, {
        title: 'panel-2',
        height: 100,
        anchor: '50%',
        html: '高度等于100，宽度 = 容器宽度的50%'
    },{
        title:'panel-3',
        anchor: '50% 50%',
        html: '高度、宽度 = 容器的50%'
    }]
});</span>

    运行结果:

十、tab 布局

    简介：也称分页布局、标签布局。
    实例：

var tabPanel = new Ext.TabPanel({
    renderTo: 'tabDiv',
    width: 500,
    height: 300,
    activeTab: 0, // 默认显示第一个Tab的内容
    defaults: {
        autoScroll: true
    },
    items: [{
        title: 'Tab-0',
        html: "第一个Tab的内容"
    }, {
        title: 'Tab-1',
        html: '我是另一个Tab',
    }, {
        title: 'Tab-2',
        html: '这是一个可以关闭的Tab',
        closable: true
    }]
});</span>

    运行结果:

十一、vbox 布局

    简介：也称竖直布局。vertical box ,垂直方向的分行显示。它的 item 有一个flex属性，其值越大，对应的组件就会占据越大的空间。
    实例：

var vboxPanel = new Ext.Panel({
    renderTo: 'vboxDiv',
    layout: {
        type: 'vbox',
        align: 'stretch' //拉伸使其充满整个父容器
    },
    width: 500,
    height: 300,
    items: [{
        title: 'panel-1', html: 'flex:1', flex: 1
    }, {
        title: 'panel-2', html: 'height:150', height: 150
    }, {
        title: 'panel-3', html: 'flex:2', flex: 2
    }]
});</span>

    运行结果:

十二、hbox 布局

    简介：也称“水平布局”。horizontal box ，水平方向的分列显示。和 vbox 类似，有flex 属性。
    实例：

var hbox = new Ext.Panel({
    renderTo: 'hboxDiv',
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    width: 500,
    height: 300,
    items: [{
        title: 'panel-1', html: 'flex:1', flex: 1
    }, {
        title: 'panel-2', html: 'height:150', width: 150
    }, {
        title: 'panel-3', html: 'flex:2', flex: 2
    }]
})</span>

    运行结果:

总结：

    简单总结起来:
        border布局一般作为页面整体布局来使用；
        fit布局适用于那种需要将子类完全占满父类容器的情况；
        column布局用于多列；
        form是一种表单特有布局方式，实质是一行一控件的形式；
        table布局适用多行多列但是有时宽高不太容易控制。
        而且值得强调的一点就是给一个控件设置layout属性，其实指的是其内部控件的布局方式而不是它本身的布局，这点要搞清楚。