ExtJS 布局-Column布局（Column layout）

2022-06-04 22:34:10 阅读：193 来源： 互联网

标签：layout xtype title Column columnWidth 布局 height width

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

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
        }
    ]
}

标签：layout,xtype,title,Column,columnWidth,布局,height,width
来源： https://www.cnblogs.com/cqpanda/p/16332650.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9