Alloy UI

aui-panel  1.0.1

 
Filters

Class Panel - extends Component - uses WidgetStdMod

Known Subclasses:
Dialog

A base class for Panel, providing:
  • Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
  • Built-in expandable and collapsible behavior
  • Prebuilt tool buttons that can be wired up to provide other customized behavior
  • Good for building block for application-oriented user interfaces
  • Can be easily dropped into any Container or layout
Quick Example:
var instance = new A.Panel({
collapsible: true,
collapsed: true,
headerContent: 'Panel 1',
bodyContent: 'Content'
}).render();
Check the list of Configuration Attributes available for Panel.

Constructor

Panel ( config )
Parameters:
config <Object> Object literal specifying widget configuration properties.

Properties

headerTextNode - protected Node

Stores the created node for the header of the Panel.

Panel.ATTRS - static Object

Static property used to define the default attribute configuration for the Panel.

Properties inherited from Attribute:

Properties inherited from Base:

Properties inherited from Component:

Properties inherited from WidgetStdMod:

Configuration Attributes

collapsed - boolean

Whether the panel is displayed collapsed.
Default Value: false

collapsible - boolean

Whether the panel is able to be collapsed.
Default Value: false

icons - Array

Array of ButtonItem configuration objects to be displayed as icons on the Panel title.

Example:
icons: [ { icon: 'close', id: 'close' } ]
For more information how to use this option see ButtonItem.
Default Value: []

title - Boolean | String

The title to be displayed on the Panel.
Default Value: ''

Configuration attributes inherited from Widget:

Configuration attributes inherited from Base:

Configuration attributes inherited from Component:

Configuration attributes inherited from WidgetStdMod:

Methods

_addPanelClass

protected void _addPanelClass ( section )
Add css classes neede for the Panel in the passed section.
Parameters:
section <String> WidgetStdMod section (i.e., body, header, footer).

_afterCollapsedChange

protected void _afterCollapsedChange ( event )
Fires after the value of collapsed change.
Parameters:
event <EventFacade>

_afterPanelRender

protected void _afterPanelRender ( event )
Fires after render phase.
Parameters:
event <EventFacade>

_afterTitleChange

protected void _afterTitleChange ( event )
Fires after the value of title change.
Parameters:
event <EventFacade>

_renderHeaderText

protected void _renderHeaderText ( )
Render the Panel header text with the value of title.

_renderIconButtons

protected void _renderIconButtons ( )
Render the icons.

_syncCollapsedUI

protected void _syncCollapsedUI ( )
Sync the UI for the collapsed status (i.e., icons, height etc).

_syncTitleUI

protected void _syncTitleUI ( )
Sync the headerTextNode with the value of the title.

collapse

void collapse ( )
Collapse the panel setting the collapsed attribute to true.

expand

void expand ( )
Expand the panel setting the collapsed attribute to false.

initializer

protected void initializer ( )
Construction logic executed during Panel instantiation. Lifecycle.

toggle

void toggle ( )
Toggle the visibility of the Panel toggling the value of the visible attribute.

toggleCollapse

void toggleCollapse ( )
Toggle the collapsed value. Expanding and collapsing the Panel.

Methods inherited from Plugin.Host:

Events

collapsedChange

collapsedChange ( event )
Fires when the value for the configuration attribute 'collapsed' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

collapsibleChange

collapsibleChange ( event )
Fires when the value for the configuration attribute 'collapsible' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

iconsChange

iconsChange ( event )
Fires when the value for the configuration attribute 'icons' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

titleChange

titleChange ( event )
Fires when the value for the configuration attribute 'title' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set