ExtJS 布局-Column布局（Column layout）

更新记录：
2022年6月1日 开始。
2022年6月4日 发布。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

1.说明#

使用列布局，可以将容器拆分为特定大小的列，并将子组件放置在这些列中。
可以设置子组件宽度值为： 百分比(相对父容器宽度) 或者 绝对值。
注意：子项组件总是左对齐。

2.设置布局方法#

在父容器中设置

layout: 'column'
//或者
layout: {
   type: 'column'
}

然后在子组件中使用columnWidth属性设置宽度。
注意：
1.如果设置为百分比，所有子项的columnWidth属性的总和应等于1
2.还可以定义固定宽度。
3.如果子组件宽度同时包含绝对值和百分比，则先减去绝对值再计算百分比。
4.column布局不会管理子组件的高度，最好为父容器设置autoScroll:true

//使用百分比
columnWidth: 0.4,
//使用绝对值
columnWidth: 350,

3.适合和不适合场景#

适合场景：

1.将多个子组件进行按多个列进行布局。
2.部分子组件的宽度为固定值，部分子组件的宽度为相对值。

不适合场景：

4.实例#

4.1实例：使用列布局#

代码：

{
    xtype: 'panel',
    width: 700,
    height: 400,
    layout: 'column',
    autoScroll: true,
    items: [
        {
            xtype: 'panel',
            title: 'Panel Panda 666 com', //哈哈
            columnWidth: 0.4,
            height: 400,
        },
        {
            xtype: 'panel',
            title: 'Panel panda com 666',
            columnWidth: 0.6,
            layout: 'center',
            height: 400
        }, 
        {
            xtype: 'panel',
            title: 'Panel 3',
            width: 150,
            height: 400
        }
    ]
}

4.2实例：使用列布局混合固定宽度#

代码：

{
    title: 'Column Layout - Mixed',
    width: 450,
    height: 250,
    layout: 'column',
    items: [
        {
            title: 'Column 1',
            width: 100
        },
        {
            title: 'Column 2',
            columnWidth: 0.7
        },
        {
            title: 'Column 3',
            columnWidth: 0.3
        }
    ],
}

4.3实例：使用百分比#

代码：

{
    xtype: 'panel',
    layout : 'column',
    scrollable: true,
    requires: ['Ext.layout.container.Column'],
    width : 800,
    height: 300,
    items: [
        {
            title : 'First Component width 30%',
            html : 'This is First Component',
            columnWidth : 0.30,
            height:800,
        },
        {
            title : 'Second Component width 40%',
            html : 'This is Second Component',
            columnWidth : 0.40
        },
        {
            title : 'Third Component width 30%',
            html : 'This is Third Component' ,
            columnWidth : 0.30
        }
    ]
}

4.4实例：使用百分比对半分#

代码：

{
    xtype: 'panel',
    width: 400,
    height: 300,
    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
        }
    ]
}