当前位置:Web前端 > extjs> 正文

extjs accordion折叠布局

时间:2013-8-18类别:Web前端

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折叠布局效果图

     

    上一篇下一篇

    猜您喜欢

    热门推荐