Properties Methods Events Config Options Direct Link
ContainerLayout
  FitLayout
    AccordionLayout

Class Ext.layout.AccordionLayout

Package:Ext.layout
Defined In:AccordionLayout.js
Class:AccordionLayout
Extends:FitLayout

This is a layout that manages multiple Panels in an expandable accordion style such that only one Panel can be expanded at any given time. Each Panel has built-in support for expanding and collapsing.

Note: Only Ext.Panels and all subclasses of Ext.Panel may be used in an accordion layout Container.

This class is intended to be extended or created via the layout configuration property. See Ext.Container.layout for additional details.

Example usage:

var accordion = new Ext.Panel({
    title: 'Accordion Layout',
    layout:'accordion',
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layoutConfig: {
        // layout-specific configs go here
        titleCollapse: false,
        animate: true,
        activeOnTop: true
    },
    items: [{
        title: 'Panel 1',
        html: '<p>Panel content!</p>'
    },{
        title: 'Panel 2',
        html: '<p>Panel content!</p>'
    },{
        title: 'Panel 3',
        html: '<p>Panel content!</p>'
    }]
});

Config Options

Config OptionsDefined By
 renderHidden : Boolean
True to hide each contained item on render (defaults to false).
ContainerLayout
 sequence : Boolean
Experimental. If animate is set to true, this will result in each animation running in sequence.
AccordionLayout

Public Properties

PropertyDefined By

Public Methods

MethodDefined By

Public Events

This class has no public events.