Ext.layout.container.Accordion折叠布局，对应面板布局配置项的Accordion。该布局可以包含多个子面板，任何时候都只有一个子面板处于打开状态，每个面板都内置了对展开和收缩功能的支持。
1、Ext.layout.container.Accordion主要配置
| 配置项 | 类型 | 说明 |
|---|---|---|
| activeOnTop | Boolean | 是否保持展开的子面板处于父面板的顶端，true则交换当前展开面板到顶端，false则保持原来的位置不动 |
| animate | Boolean | 设置在展开或收缩子面板时是否使用滑动方式，true则采用滑动方式，默认为true |
| collapseFirst | Boolean | 设置为true则折叠按钮总作为面板标题工具按钮的第一个渲染，默认false作为最后一个被渲染 |
| fill | Boolean | 设置当前子面板是否自动调整高度充满父面板的剩余空间，true则充满，默认为true |
| multi | Boolean | 是否允许同时打开多个子面板，默认为false |
| titleCollapse | Boolean | 是否允许通过点击子面板的标题来展开或收缩面板，true则允许，默认为true |
2、Ext.layout.container.Accordion示例
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ext.layout.container.Accordion示例</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.create("Ext.panel.Panel", { title: "Ext.layout.container.Accordion示例", frame: true, 300, height: 200, renderTo: Ext.getBody(), bodyPadding: 5, layout: "accordion", defaults: { bodyStyle: "background-color:#FFFFFF" }, items: [{ title: "嵌套面板一", html: "面板一" }, { title: "嵌套面板二", html: "面板二" }, { title: "嵌套面板三", html: "面板三" }] }); }); </script> </head> <body> </body> </html>
效果图：
