ExtJS CardLayout布局实现与示例

本文档主要介绍了如何在ExtJS中使用CardLayout布局，这是一种常见的选项卡式布局方式，适用于实现像安装向导或Tab选项板等场景，允许容器组件在不同状态下显示单个子元素。首先，我们来详细解析CardLayout的原理和配置。 **CardLayout概述** - CardLayout由ExtJS中的`Ext.layout.CardLayout`类负责，其布局模式名为"card"。它允许在一个容器内动态切换显示不同的子组件，每个子组件就像卡片一样，只能有一个在屏幕上可见。 **配置参数** - `new Ext.Panel({layout: "card"})` 创建了一个Panel，设置了card布局。`activeItem` 属性指定了初始显示的子组件，`layoutOnTabChange` 控制是否在切换tab时重新布局。 - `width` 属性设置组件宽度，`layoutConfig` 配置项允许调整动画效果，如这里的`animate: true`表示切换时有动画过渡。 **代码部分** - 示例中，Panel包含了两个子组件，每个子组件的布局都是'fit'，这意味着它们会填充父容器的完整空间，分别是`diseaseWQZInfo`和`diseaseYQZInfo`。 **EXTJS开发环境搭建** - EXTJS是一个基于JavaScript的前端Ajax框架，适用于多种后端技术，如.NET、Java、PHP等。EXTJS 3.2是其较早的一个版本。 - 框架提供了丰富的组件和工具，包括API参考手册、示例程序和开发包。开发包中包含多个模块，如adapter（适配器）、build（压缩后的源码）、docs（API文档）、examples（示例程序）以及各种资源文件和源码文件。 - **开发环境准备** - 将EXTJS开发包复制到Web项目目录中，确保包含核心组件和资源文件。 - 在helloWorld示例中，需要引入ext-all.css样式文件和adapter/ext/ext-base.js及e相关的库文件。 学习CardLayout布局的关键在于理解它的作用，如何在Panel中使用它以及如何配置参数以实现所需的效果。同时，对EXTJS的开发环境搭建和资源管理也有一定的了解，这对于开发高质量的富客户端应用至关重要。通过实践helloWorld示例，开发者可以逐步掌握如何在实际项目中运用EXTJS和CardLayout进行组件的动态切换和展示。