2024年5月3日发(作者：512g固态最佳分区方案)

EXT标准布局类

收藏

面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板

上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种：

ContainerLayout（容器布局）

FitLayout（自适应布局）

AccordionLayout（折叠布局）

CardLayout（卡片式布局）

AnchorLayout（锚点布局）

AbsoluteLayout（绝对位置布局）

FormLayout（表单布局）

ColumnLayout（列布局）

TableLayout（表格布局）

BorderLayout（边框布局）

接下来分别介绍这10种布局类的特点及使用方式。

1 ContainerLayout容器布局

nerLayout 提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展

而不通过 new 关键字直接创建。如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建，表5-4是主要配置项。

表5-4 nerLayout主要配置项目表

配置项

参数类型

说明

一个对当前活动组件的引用。activeItem只在那些一次只能显示一个 items 项

activeItem

String/Number

目的布局中生效，例如：ion、yout、

out

2 FitLayout自适应布局

out 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如

果在当前容器中存在多个子面板则只有第一个会被显示。

注意：在本节的示例之前会简单的介绍新概念，组件的xtype类型。xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延

时创建。在 后续的示例中会大量使用xtype来创建组件，这将有利于读者形成使用xtype的习惯，而减少new关键字的使用。

下面是自适应布局的一个简单的示例。

代码5-7：FitLayout（自适应布局）示例