更新记录:

2022年6月11日 优化文章结构。

2022年6月9日 发布。

2022年6月1日 开始。

1、说明

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

2、设置布局方法

2.1、在容器中设置

layout: 'vbox'
layoutConfig: { } //或者 layout: {
type: 'vbox',
}

在子组件中使用的flex选项设置 相对权重直接设置width属性

注意:flex属性表示权重(优先级),不是表示大小,越大占用空间越大。

宽度计算公式:

((Container Height– Fixed Height of Child Components) / Sum of Flexes) * Flex Value

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

2.2、布局相关的配置

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

pack属性指定垂直对齐的方式,可取值:start(上)\center(中)\end(下)。

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

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

3、适合场景

适合场景:

垂直放置多个子组件。

4、实例

4.1、实例:混合flex和width



代码:

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

4.2、实例:flex按1221等分



代码:

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

ExtJS 布局-VBox布局(VBox layout)的更多相关文章

  1. Extjs Vbox布局方式,以及align种类,flex,pack属性含义简介

    VBox布局方式,熟悉下一下几个主要属性: 一.align:字符类型,指示组件在容器内的对齐方式.这个是基于容器的左上角来排列的.pack不同,pack是根据容器的最上边来显示的. 1.left(默认 ...

  2. Container容器控件的使用、Hbox与Vbox布局管理器的使用、以及AjaxAction前后台事件响应

    1.由于有前后台交互功能,需要在Spring上下文中注册一个用于提供服务的bean,对于这个bean使用Spring提供的@Component标注,如果需要使用@Component注解,需要在项目中W ...

  3. ExtJS 布局-Accordion布局(Accordion layout)

    更新记录: 2022年6月2日 开始. 2022年6月3日 发布. 1.说明 accordion(手风琴)布局一次仅显示一个子组件,内置支持 折叠 和 展开.当需要堆叠多个子组件,并每次只显示一次时, ...

  4. ExtJS 布局-Table布局(Table layout)

    更新记录: 2022年6月1日 开始. 2022年6月10日 发布. 1.说明 table布局类似表格,通过指定行列数实现布局. 2.设置布局方法 在父容器中指定 layout: 'table' la ...

  5. ExtJS 布局-HBox 布局(HBox layout)

    更新记录: 2022年6月11日 更新文章结构. 2022年6月8日 发布. 2022年6月1日 开始. 1.说明 hbox布局与column布局几乎相同,但hbox允许拉伸列的高度. 既可以在水平方 ...

  6. 【ExtJS】简单布局应用

    前几天学习了ExtJS的各种布局后,以下就是各种实践,从简单做起. 实现目的: 一个提交表单页,一个显示信息页,表单为个人基本资料输入,显示页为基本信息展示. 内容: 总体布局为border布局,展示 ...

  7. 【ExtJS】FormPanel 布局(二)

    周末2天好好学习了下布局,现在都给实现了吧. 5.border布局: Border布局将容器分为五个区域:north.south.east.west和center.除了center区域外,其他区域都需 ...

  8. Extjs关于FormPanel布局

    Extjs关于FormPanel布局 FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局 ...

  9. Extjs面板和布局初探

    面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来 ...

随机推荐

  1. Go语言 映射(map)

    Go语言  映射(map) 1. 什么是 map2. 创建 map3. 访问 map4. nil map和空map5. map中元素的返回值6. len()和delete()7. 测试map中元素是否 ...

  2. spring配置数据源(交给spring容器完成)

    ##将DataSource的创建权交给spring容器去完成 1.导入spring依赖 <dependency> <groupId>org.springframework< ...

  3. 正则表达式小技巧,sql中in的字符串处理

    工作中我经常写sql,当写带in的语句时,需要敲好多单引号,逗号,敲写起来容易易出错.因此,我写了一个小工具,处理这种繁琐工作.原理简单,利用正则表达式匹配.替换. 先看界面,一个html页面,包含三 ...

  4. 面试官:RabbitMQ有哪些工作模式?

    哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 今天又.又.又来面试了,还是老规 ...

  5. 论文解读(MCGC)《Multi-view Contrastive Graph Clustering》

    论文信息 论文标题:Multi-view Contrastive Graph Clustering论文作者:Erlin Pan.Zhao Kang论文来源:2021, NeurIPS论文地址:down ...

  6. Educational Codeforces Round 108 (Div. 2), C map套vector存储

    地址  Problem - C - Codeforces 题目 题意 一个学校有n个人参加比赛,他们分别属于ui队,每个人的能力值为si 当每个队需要1~n个人的时候,这个学校能参加的人的能力值和最大 ...

  7. 配置docker阿里加速器

    阿里云会根据账号生成一个账号加速器地址,例如: https://jywd41dg.mirror.aliyuncs.com 将加速器地址配置到docker的daemon.json文件中:# 编辑daem ...

  8. MATLAB地图工具箱学习心得(一)关于地图分带投影的拼接

    关于matlab地图投影系列: MATLAB地图工具箱学习心得(二)设计可变参数和位置拾取的"放大镜"式投影程序 --- 本学期的地图投影课程已经结束了,这篇博客用于记录自己在学习 ...

  9. 100ms的SQL把服务器搞崩溃了

    前言 一个项目上线了两个月,除了一些反馈的优化和小Bug之外,项目一切顺利:前期是属于推广阶段,可能使用人员没那么多,当然对于项目部署肯定提前想到并发量了,所以早就把集群安排上,而且还在测试环境搞了一 ...

  10. pyqt5 重启相同线程错误:QThread: Destroyed while thread is still running

    背景: 把一个基于QObject的类的槽运行在另一个线程,我们可以用moveToThread的方法. 1 新建一个子线程类,编写槽函数和信号,MyClass *m_MyClass=new MyClas ...