Extjs4---accordion布局

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>

效果图