ExtJS 4手风琴布局详解：动态面板展开与折叠

Accordion布局是Ext.js中的一种流行布局方式，它模拟了手风琴的效果，允许用户在一个容器中切换多个面板。在Accordion布局下，容器内最多只能有一个面板处于激活状态（即可见并占据空间），其他面板则折叠隐藏。这种布局适用于需要展示一系列可切换内容的应用场景，如导航菜单、选项卡或者详细视图。 要创建一个Accordion布局的面板，首先需要使用`Ext.create`方法来实例化`Ext.panel.Panel`对象，并指定布局类型为'accordion'。以下是一段示例代码： ```javascript Ext.create('Ext.panel.Panel', { title: 'AccordionLayout', // 面板标题 width: 300, // 宽度 height: 300, // 高度 x: 20, // 横向位置 y: 20, // 垂直位置 layout: 'accordion', // 布局类型：accordion defaults: { // 默认配置 bodyStyle: 'padding:15px' // 内容区域样式 }, layoutConfig: { // 特定于accordion的配置 titleCollapse: false, // 是否折叠标题，默认显示 animate: true, // 展开和折叠动画是否启用 activeOnTop: true // 是否默认顶部面板激活，即最先显示 }, items: [ // 子面板配置 { title: 'Panel1', // 面板标题 html: 'Panelcontent!' // 面板内容 }, { title: 'Panel2', html: 'Panelcontent!' }, { title: 'Panel3', html: 'Panelcontent!' } ], renderTo: Ext.getBody() // 渲染到页面上 }); ``` 在这个例子中，我们设置了三个面板，它们的标题分别为'Panel1'、'Panel2'和'Panel3'，默认情况下，第一个面板会被激活并显示出来。用户可以通过点击面板标题来切换不同面板的内容，同时，如果`titleCollapse`设置为`true`，点击标题时标题会折叠；`animate`选项控制面板展开和折叠时的动画效果，而`activeOnTop`则决定了面板是否默认在顶部激活。 Accordion布局适用于需要保持清晰焦点和简洁视觉的界面设计，尤其适合信息展示和组织，但需要注意的是，过多的面板可能会导致界面显得过于拥挤，因此在实际应用中需要根据设计需求合理控制面板数量。