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>
  

Extjs4---accordion布局