extjs4常用的layout浅析。

译自：http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Anchor

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Column

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Form

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Table

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.VBox

extjs4常用的layout浅析。

1、Anchor

根据外部容器的宽度和高度，自适应内部items的宽度和高度，和根据百分比调整，或者像素数值调整：

如下：

Ext.create('Ext.Panel', {
    width: 500,
    height: 400,
    title: "AnchorLayout Panel",
    layout: 'anchor',
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'panel',
            title: '75% Width and 20% Height',
            anchor: '75% 20%'
        },
        {
            xtype: 'panel',
            title: 'Offset -300 Width & -200 Height',
            anchor: '-300 -200'     
        },
        {
            xtype: 'panel',
            title: 'Mixed Offset and Percent',
            anchor: '-250 20%'
        }
    ]
});

2、Column

可以把items分成多列排序(把一行分成多列)，同样支持根据百分比调整宽度，或者像素数值调整宽度：

// All columns are percentages -- they must add up to 1
Ext.create('Ext.panel.Panel', {
    title: 'Column Layout - Percentage Only',
    width: 350,
    height: 250,
    layout:'column',
    items: [{
        title: 'Column 1',
        columnWidth: 0.25
    },{
        title: 'Column 2',
        columnWidth: 0.55
    },{
        title: 'Column 3',
        columnWidth: 0.20
    }],
    renderTo: Ext.getBody()
});

// Mix of width and columnWidth -- all columnWidth values must add up
// to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width.

Ext.create('Ext.Panel', {
    title: 'Column Layout - Mixed',
    width: 350,
    height: 250,
    layout:'column',
    items: [{
        title: 'Column 1',
        width: 120
    },{
        title: 'Column 2',
        columnWidth: 0.7
    },{
        title: 'Column 3',
        columnWidth: 0.3
    }],
    renderTo: Ext.getBody()
});

3、Form

items中的每个items都占据一行，并且内容和宽度根据外部容器的宽度自适应调整：

Ext.create('Ext.Panel', {
    width: 500,
    height: 300,
    title: "FormLayout Panel",
    layout: 'form',
    renderTo: Ext.getBody(),
    bodyPadding: 5,
    defaultType: 'textfield',
    items: [{
       fieldLabel: 'First Name',
        name: 'first',
        allowBlank:false
    },{
        fieldLabel: 'Last Name',
        name: 'last'
    },{
        fieldLabel: 'Company',
        name: 'company'
    }, {
        fieldLabel: 'Email',
        name: 'email',
        vtype:'email'
    }, {
        fieldLabel: 'DOB',
        name: 'dob',
        xtype: 'datefield'
    }, {
        fieldLabel: 'Age',
        name: 'age',
        xtype: 'numberfield',
        minValue: 0,
        maxValue: 100
    }, {
        xtype: 'timefield',
        fieldLabel: 'Time',
        name: 'time',
        minValue: '8:00am',
        maxValue: '6:00pm'
    }]
});

4、Table

此布局允许您轻松地将内容呈现到HTML表中。 可以指定列的总数，并且可以使用rowspan和colspan在表中创建复杂布局。

可以比较灵活的制造表格，类似HTML的表格。需要配置的参数有：

• rowspan Applied to the table cell containing the item.
• colspan Applied to the table cell containing the item.
• cellId An id applied to the table cell containing the item.
• cellCls A CSS class name added to the table cell containing the item.

官网例子：

Ext.create('Ext.panel.Panel', {
    title: 'Table Layout',
    width: 300,
    height: 150,
    layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
    },
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:20px'
    },
    items: [{
        html: 'Cell A content',
        rowspan: 2
    },{
        html: 'Cell B content',
        colspan: 2
    },{
        html: 'Cell C content',
        cellCls: 'highlight'
    },{
        html: 'Cell D content'
    }],
    renderTo: Ext.getBody()
});

5、VBox

垂直的布局；align配置 位置，flex 配置每个item的高度，按百分比布局，自适应整个容器的高度。

Ext.create('Ext.Panel', {
    width: 500,
    height: 400,
    title: "VBoxLayout Panel",
    layout: {
        type: 'vbox',
        align: 'center'
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        width: 250,
        flex: 2
    },
    {
        xtype: 'panel',
        title: 'Inner Panel Two',
        width: 250,
        flex: 4
    },
    {
        xtype: 'panel',
        title: 'Inner Panel Three',
        width: '50%',
        flex: 4
    }]
});

6、HBox

水平布局，配置类似VBox；

Ext.create('Ext.Panel', {
    width: 500,
    height: 300,
    title: "HBoxLayout Panel",
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    renderTo: document.body,
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        flex: 2
    },{
        xtype: 'panel',
        title: 'Inner Panel Two',
        flex: 1
    },{
        xtype: 'panel',
        title: 'Inner Panel Three',
        flex: 1
    }]
});