Class CQ.Ext.grid.GridPanel

True to use height:'auto', false to use fixed height (or allow it to be managed by its parent Container's layout manager. Defaults to false.

Note: Although many components inherit this config option, not all will function as expected with a height of 'auto'. Setting autoHeight:true means that the browser will manage height based on the element's contents, and that Ext will not manage it at all.

If the browser is managing the height, be aware that resizes performed by the browser in response to changes within the structure of the Component cannot be detected. Therefore changes to the height might result in elements needing to be synchronized with the new height. Example:

var w = new CQ.Ext.Window({
    title: 'Window',
    width: 600,
    autoHeight: true,
    items: {
        title: 'Collapse Me',
        height: 400,
        collapsible: true,
        border: false,
        listeners: {
            beforecollapse: function() {
                w.el.shadow.hide();
            },
            beforeexpand: function() {
                w.el.shadow.hide();
            },
            collapse: function() {
                w.syncShadow();
            },
            expand: function() {
                w.syncShadow();
            }
        }
    }
}).show();

Another option available by default is to specify 'x-plain' which strips all styling except for required attributes for Ext layouts to function (e.g. overflow:hidden). See unstyled also.

A DomHelper element specification object specifying the element structure of this Panel's bbar Element. See bodyCfg also.

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.

The CSS class used to to apply to the special clearing div rendered directly after each form field wrapper to provide field clearing (defaults to 'x-form-clear-left').

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') and either a fieldLabel is specified or isFormField=true is specified.

See CQ.Ext.layout.FormLayout.fieldTpl also.

true to enable dragging of this Panel (defaults to false).

For custom drag/drop implementations, an CQ.Ext.Panel.DD config could also be passed in this config instead of true. CQ.Ext.Panel.DD is an internal, undocumented class which moves a proxy Element around in place of the Panel's element, but provides no other behaviour during dragging or on drop. It is a subclass of CQ.Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of CQ.Ext.dd.DragDrop e.g.:

new CQ.Ext.Panel({
    title: 'Drag me',
    x: 100,
    y: 100,
    renderTo: CQ.Ext.getBody(),
    floating: true,
    frame: true,
    width: 400,
    height: 200,
    draggable: {
//      Config option of CQ.Ext.Panel.DD class.
//      It's a floating Panel, so do not show a placeholder proxy in the original position.
        insertProxy: false,

//      Called for each mousemove event while dragging the DD object.
        onDrag : function(e){
//          Record the x,y position of the drag proxy so that we can
//          position the Panel at end of drag.
            var pel = this.proxy.getEl();
            this.x = pel.getLeft(true);
            this.y = pel.getTop(true);

//          Keep the Shadow aligned if there is one.
            var s = this.panel.getEl().shadow;
            if (s) {
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
        },

//      Called on the mouseup event.
        endDrag : function(e){
            this.panel.setPosition(this.x, this.y);
        }
    }
}).show();

A Toolbar object, a Toolbar config, or an array of Buttons/Button configs, describing a Toolbar to be rendered into this Panel's footer element.

After render, the fbar property will be an Toolbar instance.

If buttons are specified, they will supersede the fbar configuration property.

var w = new CQ.Ext.Window({
    height: 250,
    width: 500,
    bbar: new CQ.Ext.Toolbar({
        items: [{
            text: 'bbar Left'
        },'->',{
            text: 'bbar Right'
        }]
    }),
    buttonAlign: 'left', // anything but 'center' or 'right' and you can use '-', and '->'
                                  // to control the alignment of fbar items
    fbar: [{
        text: 'fbar Left'
    },'->',{
        text: 'fbar Right'
    }]
}).show();

Note: Although a Toolbar may contain Field components, these will not be updated by a load of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container->Component hierarchy, and so are not scanned to collect form items. However, the values will be submitted because form submission parameters are collected from the DOM tree.

The label text to display next to 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 (e.g. CQ.Ext.form.FormPanel or specifying layout:'form').

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

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

Note: this config is only used when this Component is rendered by a Container which has been configured to use a BoxLayout. Each child Component with a flex property will be flexed either vertically (by a VBoxLayout) or horizontally (by an HBoxLayout) according to the item's relative flex value compared to the sum of all Components with flex value specified. Any child items that have either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed).

A DomHelper element specification object specifying the element structure of this Panel's header Element. See bodyCfg also.

How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset position) and 'display' (css display).

Note: the default of 'display' is generally preferred since items are automatically laid out when they are first shown (no sizing is done while hidden).

An example of specifying a custom icon class would be something like:

// specify the property in the config for the class:
     ...
     iconCls: 'my-icon'

// css class that specifies background image to be used as the icon image:
.my-icon { background-image: url(../images/my-icon.gif) 0 6px no-repeat !important; }

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.

// 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'
    }]
});

A CSS style specification string to apply directly to this field's label. Defaults to the container's labelStyle value if set (e.g., CQ.Ext.layout.FormLayout.labelStyle , or '').

Note: see the note for clearCls.

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

new CQ.Ext.FormPanel({
    height: 100,
    renderTo: CQ.Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});

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}

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.

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 DomHelper element specification object specifying the element structure of this Panel's tbar Element. See bodyCfg also.

Each tool config may contain the following properties:

Note that, apart from the toggle tool which is provided when a panel is collapsible, these tools only provide the visual button. Any required functionality must be provided by adding handlers that implement the necessary behavior.

Example usage:

tools:[{
    id:'refresh',
    qtip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panel){
        // refresh logic
    }
},
{
    id:'help',
    qtip: 'Get Help',
    handler: function(event, toolEl, panel){
        // whatever
    }
}]

For the custom id of 'help' define two relevant css classes with a link to a 15x15 image:

.x-tool-help {background-image: url(images/help.png);}
.x-tool-help-over {background-image: url(images/help_over.png);}
// if using an image sprite:
.x-tool-help {background-image: url(images/help.png) no-repeat 0 0;}
.x-tool-help-over {background-position:-15px 0;}