ExtJS 布局-VBox布局(VBox layout)
更新记录:
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)的更多相关文章
- Extjs Vbox布局方式,以及align种类,flex,pack属性含义简介
VBox布局方式,熟悉下一下几个主要属性: 一.align:字符类型,指示组件在容器内的对齐方式.这个是基于容器的左上角来排列的.pack不同,pack是根据容器的最上边来显示的. 1.left(默认 ...
- Container容器控件的使用、Hbox与Vbox布局管理器的使用、以及AjaxAction前后台事件响应
1.由于有前后台交互功能,需要在Spring上下文中注册一个用于提供服务的bean,对于这个bean使用Spring提供的@Component标注,如果需要使用@Component注解,需要在项目中W ...
- ExtJS 布局-Accordion布局(Accordion layout)
更新记录: 2022年6月2日 开始. 2022年6月3日 发布. 1.说明 accordion(手风琴)布局一次仅显示一个子组件,内置支持 折叠 和 展开.当需要堆叠多个子组件,并每次只显示一次时, ...
- ExtJS 布局-Table布局(Table layout)
更新记录: 2022年6月1日 开始. 2022年6月10日 发布. 1.说明 table布局类似表格,通过指定行列数实现布局. 2.设置布局方法 在父容器中指定 layout: 'table' la ...
- ExtJS 布局-HBox 布局(HBox layout)
更新记录: 2022年6月11日 更新文章结构. 2022年6月8日 发布. 2022年6月1日 开始. 1.说明 hbox布局与column布局几乎相同,但hbox允许拉伸列的高度. 既可以在水平方 ...
- 【ExtJS】简单布局应用
前几天学习了ExtJS的各种布局后,以下就是各种实践,从简单做起. 实现目的: 一个提交表单页,一个显示信息页,表单为个人基本资料输入,显示页为基本信息展示. 内容: 总体布局为border布局,展示 ...
- 【ExtJS】FormPanel 布局(二)
周末2天好好学习了下布局,现在都给实现了吧. 5.border布局: Border布局将容器分为五个区域:north.south.east.west和center.除了center区域外,其他区域都需 ...
- Extjs关于FormPanel布局
Extjs关于FormPanel布局 FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局 ...
- Extjs面板和布局初探
面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来 ...
随机推荐
- 使用Socket实现HttpServer(一)
使用Socket实现HttpServer(一) Socket 编程 socket 翻译过来叫插槽,一张图你就明白 socket 就插在 TCP 也就是传输层上,对用户的请求和服务器的响应进行处理. 下 ...
- Python入门-运算符
运算通常可以根据最终获得的值不同,可以分两类,即结果为具体的值,结果为bool值,那么哪些结果为具体的值-->算数运算.赋值运算,哪些结果又为bool值?--->比较运算.逻辑运算和成员运 ...
- golang常用库包:Go依赖注入(DI)工具-wire使用
google 出品的依赖注入库 wire:https://github.com/google/wire 什么是依赖注入 依赖注入 ,英文全名是 dependency injection,简写为 DI. ...
- 2022.02.21 UB
2022.02.21 UB 参考资料: https://zhuanlan.zhihu.com/p/141467895 https://blog.csdn.net/ghscarecrow/article ...
- 『现学现忘』Git基础 — 12、Git用户签名(补充)
目录 1.修改用户签名 2.取消用户签名 3.用户签名的优先级 4.总结本文用到的Git命令 1.修改用户签名 其实很简单,就是重新执行git config命令,换个用户名和邮箱地址就可以了,新配置的 ...
- -5.C++读入一行字符串
-5.C++读入一行字符串 cin.getline(char * str, int size_t, char delim) 头文件: #include<iostream> 参数1:字符数组 ...
- 动态规划 Dynamic Programming 学习笔记
文章以 CC-BY-SA 方式共享,此说明高于本站内其他说明. 本文尚未完工,但内容足够丰富,故提前发布. 内容包含大量 \(\LaTeX\) 公式,渲染可能需要一些时间,请耐心等待渲染(约 5s). ...
- redis:缓存穿透、缓存击穿、缓存雪崩
缓存穿透的解决方案(空标记) 缓存穿透是指,在数据存储系统中不存在的记录,不会被存储到缓存中.这种记录每次的查询流量都会穿透到数据存储层.在高流量的场景下,不断查询空结果会大量消耗数据查询服务的资源, ...
- GO语言学习——切片二
使用make()函数构造切片 格式: make([]T, size, cap) 其中: T:切片的元素类型 size:切片中元素的数量 cap:切片的容量 切片的本质 切片的本质就是对底层数组的封装, ...
- ONNXRuntime学习笔记(二)
继上一篇计划的实践项目,这篇记录我训练模型相关的工作. 首先要确定总体目标:训练一个pytorch模型,CIFAR-100数据集测试集acc达到90%:部署后推理效率达到50ms/张, 部署平台为wi ...