ExtJS 布局-Column布局(Column layout)

发布时间:2022-06-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ExtJS 布局-Column布局(Column layout)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1.说明

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

ExtJS 布局-Column布局(Column layout)

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实例:使用列布局

ExtJS 布局-Column布局(Column layout)

代码:

{
    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实例:使用列布局混合固定宽度

ExtJS 布局-Column布局(Column layout)

代码:

{
    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实例:使用百分比

ExtJS 布局-Column布局(Column layout)

代码:

{
    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实例:使用百分比对

ExtJS 布局-Column布局(Column layout)

代码:

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

脚本宝典总结

以上是脚本宝典为你收集整理的ExtJS 布局-Column布局(Column layout)全部内容,希望文章能够帮你解决ExtJS 布局-Column布局(Column layout)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。