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

原创于 2020-05-15 08:12:02 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ext #accordion #activeOnTop

Ext 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了ExtJS中手风琴布局的基本概念及使用方法。详细讲述了如何创建一个包含多个面板的手风琴布局，并通过示例代码展示了如何设置面板的属性如标题折叠、动画效果等。

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() 
    });