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,否则会出错。