Extjs4布局详解(三)—accordion布局

 

accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。
注意：只有Ext.Panels 和所有Ext.panel.Panel 子项，才可以使用accordion布局。

示例代码：

Ext.create('Ext.panel.Panel', { 
        title: 'Accordion Layout',     
        width: 300,      
        height: 300, 
        x:20, 
        y:20, 
        layout:'accordion',     
        defaults: { 
            bodyStyle: 'padding:15px' 
        }, 
        layoutConfig: {        
            titleCollapse: false,         
            animate: true,         
            activeOnTop: true      
        },     
        items: [{         
            title: 'Panel 1',         
            html: 'Panel content!'      
        },{         
            title: 'Panel 2',         
            html: 'Panel content!'     
        },{ 
            title: 'Panel 3',         
            html: 'Panel content!'     
        }],      
        renderTo: Ext.getBody() 
    }); 

 

 

 其中activeOnTop可以控制是否在最上边展开