Properties

Methods

Events

Config Options

Direct Link

ContainerLayout
  FitLayout
    AccordionLayout

Class CQ.Ext.layout.AccordionLayout

Package:	CQ.Ext.layout
Class:	AccordionLayout
Extends:	CQ.Ext.layout.FitLayout
Clientlib:	cq.widgets

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 CQ.Ext.Panels and all subclasses of CQ.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 CQ.Ext.Container.layout for additional details.

Example usage:

var accordion = new CQ.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 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 t... 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 di... 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 tha... 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 cont... 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 CQ.Ext.Component.ctCls also. Note: `extraCls` defaults to `''` except for the following classes which assign a value by default: Absolute Layout : `'x-abs-layout-item'` Box Layout : `'x-box-item'` Column Layout : `'x-column'` To configure the above Classes with an extra CSS class append to the default. For example, for ColumnLayout: `extraCls: 'x-column custom-class'`	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 current... 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 se... 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. 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/co... 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

Public Properties

Property		Defined By
	activeItem : CQ.Ext.Component A reference to the CQ.Ext.Component that is active. For example, if(myPanel.layout.activeItem.id == 'item-1') { ...... A reference to the CQ.Ext.Component that is active. For example, `if(myPanel.layout.activeItem.id == 'item-1') { ... }` `activeItem` only applies to layout styles that can display items one at a time (like CQ.Ext.layout.AccordionLayout, CQ.Ext.layout.CardLayout and CQ.Ext.layout.FitLayout). Read-only. Related to CQ.Ext.Container.activeItem.	ContainerLayout
	fieldTpl : CQ.Ext.Template The CQ.Ext.Template used by Field rendering layout classes (such as CQ.Ext.layout.FormLayout) to create the DOM struc... The CQ.Ext.Template used by Field rendering layout classes (such as CQ.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 CQ.Ext.layout.FormLayout.getTemplateArgs.	ContainerLayout
	monitorResize : Object This monitorResize flag will be renamed soon as to avoid confusion with the Container version which hooks onWindowRes... This monitorResize flag will be renamed soon as to avoid confusion with the Container version which hooks onWindowResize to doLayout monitorResize flag in this context attaches the resize event between a container and it's layout	ContainerLayout

Public Methods

Method		Defined By
	parseMargins( `Number\|String v` ) : Object Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations (e.g. 10, ... Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result) Parameters: `v` : Number\|String The encoded margins Returns: `Object` An object with margin sizes for top, right, bottom and left	ContainerLayout
	setActiveItem( `String/Number item` ) : void Sets the active (expanded) item in the layout. Sets the active (expanded) item in the layout. Parameters: `item` : String/Number The string component id or numeric index of the item to activate Returns: `void`	AccordionLayout

Public Events

This class has no public events.