ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ExtJS 布局-VBox布局(VBox layout)

2022-06-09 22:04:36  阅读:170  来源: 互联网

标签:flex layout title 布局 VBox Item html Panel


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

1.说明

vbox布局类似auto布局,将子组件一个接一个垂直向下放置,既可以在水平方向也可以垂直方向改变排列方式。

image

设置布局方法

在容器中设置

layout: 'vbox'
layoutConfig: {

}

在子组件中使用的flex选项设置 相对权重直接设置width属性
注意:flex属性表示权重(优先级),不是表示大小,越大占用空间越大。
宽度计算公式:
((Container Height– Fixed Height of Child Components) / Sum of Flexes) * Flex Value

{
    title: 'Item 1',
    html: 'Item 1',
    flex: 1
}

或者

在容器中设置

layout: {
   type: 'vbox',
}

在子组件中使用的flex选项 设置相对值 或 直接设置width属性。
注意:flex属性表示权重(优先级),不是表示大小,越大占用空间越大。

{
    title: 'Item 1',
    html: 'Item 1',
    flex: 1
}

布局相关的配置

layout: {
   type: 'vbox',
   pack: 'start',
   align: 'stretch',
}

pack属性指定垂直对齐的方式,可取值:start(上)\center(中)\end(下)。
align属性指定水平对齐的方式,可取值:left(左)/middle(中)/right(右)/stretch(容器内容区的宽度铺满)/ stretchmax(拉伸到最宽子项宽度)。

layoutConfig: {
    pack: 'start',
    align: 'top',
},

适合场景

适合场景:

垂直放置多个子组件。

实例

实例:混合flex和width

image
代码:

{
    xtype: 'panel',
    width: 700,
    height: 400,
    layout: {
        type: 'vbox',
        pack: 'end',
        align: 'stretch',
    },
    items: [
        {
            title: 'Item 1',
            html: 'flex: 1',
            flex: 1
        },
        {
            title: 'Item 2',
            html: 'height: 100',
            height: 100
        },
        {
            title: 'Item 3',
            html: 'flex: 2',
            flex: 2
        }
    ]
}

实例:flex按1221等分

image
代码:

{
    xtype: 'panel',
    layout : {
        type :'vbox',
        align: 'stretch'
    },
    width : 600,
    height :400,
    frame :true,
    items : [
        {
            title: 'Panel 1',
            html : 'Panel with flex 1',
            margin: '0 0 10 0',
            flex : 1
        },
        {
            title: 'Panel 2',
            html : 'Panel with flex 2',
            margin: '0 0 10 0',
            flex : 2
        },
        {
            title: 'Panel 3',
            flex : 2,
            margin: '0 0 10 0',
            html : 'Panel with flex 2'
        },
        {
            title: 'Panel 4',
            html : 'Panel with flex 1',
            margin: '0 0 10 0',
            flex : 1
        }
    ]
}

标签:flex,layout,title,布局,VBox,Item,html,Panel
来源: https://www.cnblogs.com/cqpanda/p/16333078.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有