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 contains multiple panels in an expandable accordion style such that only one panel can be open at any given time. Each panel has built-in support for expanding and collapsing.

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.