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>
效果图