Clear Up
SharpKit Reference

Accordion Class

This is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time (set multi config to have more open). Each Panel has built-in support for expanding and collapsing.

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

    Ext.create('Ext.panel.Panel', {
            title: 'Accordion Layout',
            width: 300,
            height: 300,
            defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:15px'
            layout: {
            // layout-specific configs go here
            type: 'accordion',
            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()

Namespace: Ext.layout.container

Base Interfaces


Name Description
activeOnTop Only valid when multi is false and animate is false. True to swap the position of each panel as it is expanded so that it becomes the first item in the container, false to keep the panels in the rendered order. Defaults to: false
animate True to slide the contained panels open and closed during expand/collapse using animation, false to open and close directly with no animation. Note: The layout performs animated collapsing and expanding, not the child Panels. Defaults to: true
autoWidth Child Panels have their width actively managed to fit within the accordion's width.

This cfg has been removed

This config is ignored in ExtJS 4

collapseFirst True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the contained Panels' title bars, false to render it last. Defaults to: false
fill True to adjust the active item's height to fill the available space in the container, false to use the item's current height, or auto height if not explicitly set. Defaults to: true
hideCollapseTool True to hide the contained Panels' collapse/expand toggle buttons, false to display them. When set to true, titleCollapse is automatically set to true. Defaults to: false
multi Set to true to enable multiple accordion items to be open at once. Defaults to: false
titleCollapse True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow expand/collapse only when the toggle tool button is clicked. When set to false, hideCollapseTool should be false also. Defaults to: true
© Copyright 2005-2011 SharpKit. All rights reserved.