Properties
Methods
Events
Config Options
Direct Link
ContainerLayoutFitLayout
| 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 | Defined By | |
|---|---|---|
| activeOnTop : Boolean True to swap the position of each panel as it is expanded so that it becomes the first item in the container,
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. This is NOT compatible with "animate:true" (defaults to false). | AccordionLayout | |
| animate : Boolean True to slide the contained panels open and closed during expand/collapse using animation, false to open and
close d... True to slide the contained panels open and closed during expand/collapse using animation, false to open and
close directly with no animation (defaults to false). Note: to defer to the specific config setting of each
contained panel for this property, set this to undefined at the layout level. | AccordionLayout | |
| autoWidth : Boolean True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
Note th... True to set each contained item's width to 'auto', false to use the item's current width (defaults to true).
Note that some components, in particular the grid, will not function properly within
layouts if they have auto width, so in such cases this config should be set to false. | AccordionLayout | |
| collapseFirst : Boolean True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
in the con... 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). | AccordionLayout | |
| extraCls : String An optional extra CSS class that will be added to the container. This can be useful for adding
customized styles to t... An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to the container or any of its children using standard CSS rules. See Ext.Component.ctCls also. Note: extraCls defaults to '' except for the following classes which assign a value by default:
| ContainerLayout | |
| fill : Boolean True to adjust the active item's height to fill the available space in the container, false to use the
item's curren... 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). | AccordionLayout | |
| hideCollapseTool : Boolean True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
When s... True to hide the contained panels' collapse/expand toggle buttons, false to display them (defaults to false).
When set to true, titleCollapse should be true also. | AccordionLayout | |
| 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 | |
| titleCollapse : Boolean True to allow expand/collapse of each contained panel by clicking anywhere on the title bar, false to allow
expand/c... 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 (defaults to true). When set to false,
hideCollapseTool should be false also. | AccordionLayout | |
| Property | Defined By | |
|---|---|---|
| activeItem : Ext.Component A reference to the Ext.Component that is active. For example, if(myPanel.layout.activeItem.id == 'item-1') { ... }
a... A reference to the Ext.Component that is active. For example, | ContainerLayout | |
| fieldTpl : Ext.Template The Ext.Template used by Field rendering layout classes (such as
Ext.layout.FormLayout) to create the DOM structure o... The Ext.Template used by Field rendering layout classes (such as
Ext.layout.FormLayout) to create the DOM structure of a fully wrapped,
labeled and styled form Field. A default Template is supplied, but this may be
overriden to create custom field structures. The template processes values returned from
Ext.layout.FormLayout.getTemplateArgs. | ContainerLayout | |
| Method | Defined By | |
|---|---|---|
setActiveItem( String/Number item )
:
voidSets the active (expanded) item in the layout. Sets the active (expanded) item in the layout. Parameters:
| AccordionLayout | |