accordion 布局也稱手風琴布局，在 accordion 布局下，在任何時間里，只有一個面板處于激活狀態。其中每個面邊都支持展開和折疊。注意：只有 Ext.Panels 和所有 Ext.panel.Panel 子項，才可以使用 accordion 布局。

    <script type="text/javascript">
			Ext.application(
				{
					name:'Layou_Accordion',
					launch:function(){
						Ext.create(
							'Ext.panel.Panel',	//創建一個Panel
							{
								title:'Accordion',
								width:200,
								height:500,
								x:20,	//設置Panel的位置
								y:20,
								layout:'accordion',	//布局為accordion
								renderTo:Ext.getBody(),
								defaults: { 
						            bodyStyle: 'padding:5px' 	
						        },
						        layoutConfig: {        
						            titleCollapse: true,	//設置為點擊整個標題欄都可以收縮   
						            animate: true,  //開啟默認動畫效果       
						            activeOnTop: true	//展開的面板總是在最頂層      
						        },     
								items:[
									{
										title:'Panel1',	//第一個面板
										html:'Panel Content1'	//內容
									},{
										title:'Panel2',
										html:'Panel Content2'
									},{
										title:'Panel3',
										html:'Panel Content3'
									}
								]
							}
						)
					}
				}
			)
			
		</script>
  

Extjs4---accordion布局