ExtJS-容器布局（Layouts）教程

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

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

说明

布局功能用来处理 容器 和 组件 的大小和位置
所有的布局属性都继承自Ext.layout.container.Container

容器布局
容器的布局负责容器所有子容器和组件的初始定位和大小调整
所有的容器都有布局功能，默认的布局是Auto
调整容器大小或容器添加或删除子组件项时，将触发重新布局
通常依赖框架自动处理布局的更新，也可以手动停止和触发布局
组件布局
组件布局功能定义了它如何调整其内部子项的大小和位置

布局管理器分类

布局管理器分为两类：组件布局 和 容器布局
每个组件都有其自己的组件布局
所有容器的布局管理器都共享Ext.layout.container.Container现有的功能

组件布局

组件布局用于管理其自身子项
使用componentLayout配置选项配置组件布局
通常，除非编写自定义组件，否则不需要使用此配置
因为所有提供的组件都带有自己的布局管理器
大多数组件使用自动布局，但更复杂的组件将需要自定义组件布局

1.预定义容器布局类型

布局类型	说明
Auto(自动布局)	大部分容器默认的布局类型
Anchor(锚)	指定每个组件相对于容器大小的比例
Absolute(绝对布局)	在容器中使用XY坐标定位布局
Accordion(手风琴)	堆叠方式显示
Border(边界布局)	使用边框进行分割布局
Card(TabPanel)	以选项卡方式排列不同的组件
Card(Wizard)	组件占满容器，使用底部导航进行切换
Column	列布局，多个列，可以为列定义固定宽度或百分比宽度
Fit(自适应)	只能有一个子项，自适应占满容器的尺寸
Table(表格布局)	按类似HTML表格方式处理布局
VBox(垂直盒子)	垂直放置组件
HBox(水平盒子)	水平放置组件

2.容器设置布局的方法

2.1说明

使用layout属性设置布局

2.2字符串形式

使用layout、layoutConfig配置项
定义布局类型

layout: 'auto',

还可以定义布局的额外设置：

layout: 'auto',
layoutConfig: {
    animate: true
},

2.3对象形式

使用layout配置项

定义布局的类型

layout: {
  type: 'auto'
}

定义布局的类型 和 布局的额外设置

layout: {
    type: 'accordion',
    animate: 'true'
}

3.手动更新布局

默认情况下，框架自动管理和更新布局，无需手动操作
框架自动调用组件的updateLayout()方法，递归更新组件布局

部分情况下，需要停止更新布局，可以使用suspendLayout()方法
手动更新布局，使用updateLayout()方法