更新记录：
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()方法