您的位置：首页 > Web前端 > extjs > 正文

extjs accordion折叠布局

更多时间：2013-8-18 类别：Web前端浏览量：3401

extjs accordion折叠布局

extjs accordion折叠布局

Ext.layout.Accordion扩展自Ext.layout.FitLayout布局，其xtype值为accordion。手风琴效果布局, 折叠布局; 该布局会包含多个子面板，任何时候都只有一个子面板处于打开状态，每个子面板都内置了对展开和收缩功能的支持。Accordion布局是在开发中使用较多的布局类，它可以在多个不同的子面板之间切换，适合于表现大量的分组内容或制作可以伸展的分组菜单。

一、主要配置项

activeOnTop：是否保持展开的子面板处于父面板的顶端，默认为false。
animate：是否在展开或收缩子面板时使用滑动方式，默认为false。
fill：设置子面板是否自动调整高度充满父面板的剩余空间，默认为true。
titleCollapse：设置是否允许通过单击子面板的标题来展开或收缩面板，默认为true。
hideCollapseTool：是否隐藏子面板的“展开收缩”按钮，默认为false。

二、accordion折叠布局实例

JScript 代码复制


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

accordion折叠布局效果图

标签：extjs accordion 布局

上一篇：extjs table布局

下一篇：面试的最后，HR问你还有什么问题要问，该怎么回答？

您可能感兴趣

extjs accordion折叠布局

extjs accordion折叠布局

热门推荐

排行榜