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

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

Extjs4---accordion布局