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, width: 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>
效果圖：
