Ext AccordionLayout 布局

Accordion布局类似于QQ中的伸缩菜单，通过点击可以折叠展开并伴有动画效果，使用该布局只需加上layout:'accordion'即可，如下代码：

 

new Ext.Panel({

renderTo:"hello",

title:"容器组件",

width:500,

height:200,

layout:"accordion",

layoutConfig: {

 

titleCollapse:true,

 

activeOnTop:true,

animate: true

},

items:[{title:"子元素1",html:"这是子元素1中的内容"},

{title:"子元素2",html:"这是子元素2中的内容"},

{title:"子元素3",html:"这是子元素3中的内容"}

]

}

);
结合上面代码，使用Accordion布局须注意事项：

第一：layoutConfig属性用以设置布局属性，titleCollapse表示点击item标题将会折叠展开组件，而不用点击折叠箭头，activeOnTop表示当某个组件展开后会位于头部。

 

第二：Itmes中每个item必须设置title，否则会出错。