Class CQ.Ext.Panel

If true the container will automatically destroy any contained component that is removed from it, else destruction must be handled manually (defaults to true).

True if the component should check for hidden classes (e.g. 'x-hidden' or 'x-hide-display') and remove them on render (defaults to false).

The maximum value in pixels which this BoxComponent will set its height to.

Warning: This will override any size management applied by layout managers.

The minimum value in pixels which this BoxComponent will set its height to.

Warning: This will override any size management applied by layout managers.

An array of events that, when fired, should be bubbled to any parent container. See CQ.Ext.util.Observable.enableBubble. Defaults to [].

Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content for this component.

• Description :
  This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
• Notes :
  The specified HTML element is appended to the layout element of the component after any configured HTML has been inserted, and so the document will not contain this element at the time the render event is fired.
  The specified HTML element used will not participate in any layout scheme that the Component may use. It is just HTML. Layouts operate on child items.
  Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.

The initial set of data to apply to the tpl to update the content area of the Component.

This option is a means of applying default settings to all added items whether added through the items config or via the add or insert methods.

If an added item is a config object, and not an instantiated Component, then the default properties are unconditionally applied. If the added item is an instantiated Component, then the default properties are applied conditionally so as not to override existing properties in the item.

If the defaults option is specified as a function, then the function will be called using this Container as the scope (this reference) and passing the added item as the first parameter. Any resulting object from that call is then applied to the item as default properties.

For example, to automatically apply padding to the body of each of a set of contained CQ.Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Usage:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new CQ.Ext.Panel({       // defaults do have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]

The text to display below this component (defaults to '').

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

See also fieldLabel.

The text to display below the fieldLabel (defaults to '').

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

See also fieldLabel.

The height of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see anchor.

True to hide the borders of each contained component, false to defer to the component's existing border settings (defaults to false).

true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a fieldLabel the space will still be reserved so that the field will line up with other fields that do have labels. Setting this to true will cause the field to not reserve that space.

Note: see the note for clearCls.

Example use:

new CQ.Ext.FormPanel({
    height: 100,
    renderTo: CQ.Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});

True to hide and show the component's container when hide/show is called on the component, false to hide and show the component itself (defaults to false). For example, this can be used as a shortcut for a hide button on a window by setting hide:true on the button when adding it to its parent container.

Note: this config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager (e.g. CQ.Ext.form.FormPanel or specifying layout:'form').

An additional CSS class to apply to the div wrapping the form item element of this field. If supplied, itemCls at the field level will override the default itemCls supplied at the container level. The value specified for itemCls will be added to the default class ('x-form-item').

Since it is applied to the item wrapper (see CQ.Ext.layout.FormLayout.fieldTpl), it allows you to write standard CSS rules that can apply to the field, the label (if specified), or any other element within the markup for the field.

Note: see the note for fieldLabel.

Example use:

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new CQ.Ext.FormPanel({
    height: 100,
    renderTo: CQ.Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});

layout

A single item, or an array of child Components to be added to this container, for example:

// specifying a single item
items: {...},
layout: 'fit',    // specify a layout!

// specifying multiple items
items: [{...}, {...}],
layout: 'anchor', // specify a layout!

Each item may be:

Notes:

The separator to display after the text of each fieldLabel. This property may be configured at various levels. The order of precedence is:

To display no separator for this field's label specify empty string ''.

Note: see the note for clearCls.

Also see hideLabel and CQ.Ext.layout.FormLayout.fieldTpl.

Example use:

new CQ.Ext.FormPanel({
    height: 100,
    renderTo: CQ.Ext.getBody(),
    layoutConfig: {
        labelSeparator: '~'   // layout config has lowest priority (defaults to ':')
    },
    labelSeparator: '>>',     // config at container level
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field 1',
        labelSeparator: '...' // field/component level config supersedes others
    },{
        xtype: 'textfield',
        fieldLabel: 'Field 2' // labelSeparator will be '='
    }]
});

*Important: In order for child items to be correctly sized and positioned, typically a layout manager must be specified through the layout configuration option.

The sizing and positioning of child items is the responsibility of the Container's layout manager which creates and manages the type of layout you have in mind. For example:

new CQ.Ext.Window({
    width:300, height: 300,
    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
    items: [{
        title: 'Panel inside a Window'
    }]
}).show();

If the layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the default layout manager will be used which does nothing but render child components sequentially into the Container (no sizing or positioning will be performed in this situation). Some container classes implicitly specify a default layout (e.g. FormPanel specifies layout:'form'). Other specific purpose classes internally specify/manage their internal layout (e.g. GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.).

layout may be specified as either as an Object or as a String:

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout or one of the two BoxLayout subclasses.

An object containing margins to apply to this BoxComponent in the format:

{
    top: (top margin),
    right: (right margin),
    bottom: (bottom margin),
    left: (left margin)
}

May also be a string containing space-separated, numeric margin values. The order of the sides associated with each value matches the way CSS processes margin values:

Defaults to:

{top:0, right:0, bottom:0, left:0}

An optional extra CSS class that will be added to this component's Element when the mouse moves over the Element, and removed when the mouse moves out. (defaults to ''). This can be useful for adding customized 'active' or 'hover' styles to the component or any of its children using standard CSS rules.

An object or array of objects that will provide custom functionality for this component. The only requirement for a valid plugin is that it contain an init method that accepts a reference of type CQ.Ext.Component. When a component is created, if any plugins are available, the component will call the init method on each plugin, passing a reference to itself. Each plugin can then call methods or respond to events on the component as needed to provide its functionality.

The registered ptype to create. This config option is not used when passing a config object into a constructor. This config option is used only when lazy instantiation is being used, and a Plugin is being specified not as a fully instantiated Component, but as a Component config object. The ptype will be looked up at render time up to determine what type of Plugin to create.

If you create your own Plugins, you may register them using CQ.Ext.ComponentMgr.registerPlugin in order to be able to take advantage of lazy instantiation and rendering.

Note: this config is only used when this BoxComponent is rendered by a Container which has been configured to use the BorderLayout layout manager (e.g. specifying layout:'border').

See CQ.Ext.layout.BorderLayout also.

An array of events that, when fired, should trigger this component to save its state (defaults to none). stateEvents may be any type of event supported by this component, including browser or custom events (e.g., ['click', 'customerchange']).

See stateful for an explanation of saving and restoring Component state.

A flag which causes the Component to attempt to restore the state of internal properties from a saved state on startup. The component must have either a stateId or id assigned for state to be managed. Auto-generated ids are not guaranteed to be stable across page loads and cannot be relied upon to save and restore the same state for a component.

For state saving to work, the state manager's provider must have been set to an implementation of CQ.Ext.state.Provider which overrides the set and get methods to save and recall name/value pairs. A built-in implementation, CQ.Ext.state.CookieProvider is available.

To set the state provider for the current page:

CQ.Ext.state.Manager.setProvider(new CQ.Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

A stateful Component attempts to save state when one of the events listed in the stateEvents configuration fires.

To save state, a stateful Component first serializes its state by calling getState. By default, this function does nothing. The developer must provide an implementation which returns an object hash which represents the Component's restorable state.

The value yielded by getState is passed to CQ.Ext.state.Manager.set which uses the configured CQ.Ext.state.Provider to save the object keyed by the Component's stateId, or, if that is not specified, its id.

During construction, a stateful Component attempts to restore its state by calling CQ.Ext.state.Manager.get passing the stateId, or, if that is not specified, the id.

The resulting object is passed to applyState. The default implementation of applyState simply copies properties into the object, but a developer may override this to support more behaviour.

You can perform extra processing on state save and restore by attaching handlers to the beforestaterestore, staterestore, beforestatesave and statesave events.

Note: this config is only used when this BoxComponent is a child item of a TabPanel.

A string to be used as innerHTML (html tags are accepted) to show in a tooltip when mousing over the associated tab selector element. CQ.Ext.QuickTips.init() must be called in order for the tips to render.

The CQ.Ext.(X)Template method to use when updating the content area of the Component. Defaults to 'overwrite' (see CQ.Ext.XTemplate.overwrite).

The width of this component in pixels (defaults to auto). Note to express this dimension as a percentage or offset see anchor.

The registered xtype to create. This config option is not used when passing a config object into a constructor. This config option is used only when lazy instantiation is being used, and a child item of a Container is being specified not as a fully instantiated Component, but as a Component config object. The xtype will be looked up at render time up to determine what type of child Component to create.

The predefined xtypes are listed here.

If you subclass Components to create your own Components, you may register them using CQ.Ext.ComponentMgr.registerType in order to be able to take advantage of lazy instantiation and rendering.