[Sencha ExtJS & Touch] Column Layout 和 HBox Layout 的区别

原文地址：http://blog.csdn.net/lovelyelfpop/article/details/51142261

ExtJS一直以来都有一个布局叫Column Layout，也就是列布局。从ExtJS4开始，新增了HBox布局，中文意思是水平方向盒子布局。

区别一

首先是Column Layout

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Container Panel',
    layout: 'column',
    items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            columnWidth: 0.5
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            columnWidth: 0.5
        }
    ]
});

然后是HBox

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Container Panel',
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            title: 'Child Panel 1',
            height: 100,
            flex: 1
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            flex: 1
        }
    ]
});

从界面效果上来看，Column布局和HBox布局没什么差别。从生成的DOM结构和css样式上可以看到，Column布局用的是 float: left向左浮动，而HBox则是 position: absolute 绝对定位。

区别二

我们来实现这样一个界面：一个父panel分成三行，每一行放2个子panel

首先是Column Layout

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 400,
    title: 'Container Panel',
    layout: { type: 'column' },
    items: [{
        title: 'Item 1',
        height: 100,
        columnWidth: .75
    },{
        title: 'Item 2',
        height: 100,
        columnWidth: .25
    },{
        title: 'Item 3',
        height: 100,
        columnWidth: .5
    },{
        title: 'Item 4',
        height: 100,
        columnWidth: .5
    },{
        title: 'Item 5',
        height: 100,
        columnWidth: .25
    },{
        title: 'Item 1',
        height: 100,
        columnWidth: .75
    }]
});

然后是HBox Layout

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 400,
    title: 'Container Panel',
    layout: { type: 'anchor' },
    items: [{
        anchor: '0',
        layout: 'hbox',
        items: [{
            title: 'Item 1',
            height: 100,
            flex: 3
        },{
            title: 'Item 2',
            height: 100,
            flex: 1
        }]
    },{
        anchor: '0',
        layout: 'hbox',
        items: [{
            title: 'Item 3',
            height: 100,
            flex: 1
        },{
            title: 'Item 4',
            height: 100,
            flex: 1
        }]
    },{
        anchor: '0',
        layout: 'hbox',
        items: [{
            title: 'Item 5',
            height: 100,
            flex: 1
        },{
            title: 'Item 6',
            height: 100,
            flex: 3
        }]
    }]
});

可以看到，Column Layout因为是 float: left 浮动的机制，所以会自动换行；而HBox Layout需要借助其它比如Anchor 布局、行布局或者垂直方向盒子布局才能达到分行的效果。以至于HBox可能会比Column布局需要更多地嵌套

区别三

Ext.application({
    name: 'Fiddle',
 
    launch: function() {
        Ext.create('Ext.Panel', {
            width: 500,
            defaults: {
                border: true
            },
            title: "HBoxLayout Panel",
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            renderTo: document.body,
            items: [{
                xtype: 'panel',
                title: 'Inner Panel One',
                flex: 2,
                height: 50
            }, {
                xtype: 'panel',
                title: 'Inner Panel Two',
                flex: 1,
                height: 150
            }, {
                xtype: 'panel',
                title: 'Inner Panel Three',
                flex: 1,
                height: 250
            }]
        });
        Ext.create('Ext.panel.Panel', {
            title: 'Column Layout Panel',
            width: 500,
            margin: '50 0 0 0',
            layout: 'column',
            defaults: {
                border: true
            },
            items: [{
                title: 'Inner Panel One',
                columnWidth: 0.50,
                height: 200
            }, {
                title: 'Inner Panel Two',
                columnWidth: 0.25,
                height: 50
            }, {
                title: 'Inner Panel Three',
                columnWidth: 0.25,
                height: 400
            }],
            renderTo: Ext.getBody()
        });
 
    }
});

可以看出来，HBox可以让子控件居中，而Column布局则不方便实现。

与Column Layout和HBox Layout相对的，还有叫Row Layout(行布局)和VBox Layout(垂直方向盒子布局)布局。机制和区别同上面类似。

附：

Sencha touch或者 Ext JS6 Modern 中的HBox和VBox，实现的机制并不是绝对定位，而是利用的CSS3的弹性盒子flexbox布局。

Ext JS6 Classic 中的HBox和VBox，在界面发生改变（比如窗口大小变化等）的时候，需要重新计算子控件的绝对位置；而CSS3的flexbox则不需要，是自动的，这样在移动端的性能相对较好。

欢迎加入Sencha Touch + Phonegap交流群

1群：194182999 (满)

2群：419834979

共同学习交流（博主QQ：479858761）