Clear Up
SharpKit Reference

AbstractPanel Class

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

A base class which provides methods common to Panel classes across the Sencha product range.

Please refer to sub class's documentation

Namespace: Ext.panel

Derived Types

Methods

Name Description
addBodyCls(JsString) Adds a CSS class to the body element. If not rendered, the class will be added when the panel is rendered.
addDocked(object, object) Adds docked item(s) to the container.
getDockedComponent(object) Finds a docked component by id, itemId or position. Also see getDockedItems
getDockedItems(JsString, object) Retrieves an array of all currently docked Components. For example to find a toolbar that has been docked at top:
panel.getDockedItems('toolbar[dock="top"]');
            
insertDocked(JsNumber, object) Inserts docked item(s) to the panel at the indicated position.
onDockedAdd(Component) Invoked after a docked item is added to the Panel.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

onDockedRemove(Component) Invoked after a docked item is removed from the Panel.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

removeBodyCls(JsString) Removes a CSS class from the body element.
removeDocked(Component, object) Removes the docked item from the panel.
setBodyStyle(object, JsString) Sets the body style according to the passed parameters.

Fields

Name Description
bodyBorder A shortcut to add or remove the border on the body of a panel. This only applies to a panel which has the frame configuration set to true. Defaults to undefined.
bodyCls A CSS class, space-delimited string of classes, or array of classes to be applied to the panel's body element. The following examples are all valid:
bodyCls: 'foo'
            bodyCls: 'foo bar'
            bodyCls: ['foo', 'bar']
            
bodyPadding A shortcut for setting a padding style on the body element. The value can either be a number to be applied to all sides, or a normal css string describing padding. Defaults to undefined.
bodyStyle Custom CSS styles to be applied to the panel's body element, which can be supplied as a valid CSS style string, an object containing style property name/value pairs or a function that returns such a string or object. For example, these two formats are interpreted to be equivalent:
bodyStyle: 'background:#ffc; padding:10px;'
            bodyStyle: {
            background: '#ffc',
            padding: '10px'
            }
            
defaultDockWeights This object holds the default weights applied to dockedItems that have no weight. These start with a weight of 1, to allow negative weights to insert before top items and are odd numbers so that even weights can be used to get between different dock orders. To make default docking order match border layout, do this:
Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
            
Changing these defaults as above or individually on this object will effect all Panels. To change the defaults on a single panel, you should replace the entire object:
initComponent: function () {
           // NOTE: Don't change members of defaultDockWeights since the object is shared.
           this.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
           this.callParent();
           }
            
To change only one of the default values, you do this:
initComponent: function () {
           // NOTE: Don't change members of defaultDockWeights since the object is shared.
           this.defaultDockWeights = Ext.applyIf({ top: 10 }, this.defaultDockWeights);
           this.callParent();
           }
            
Defaults to: {top: {render: 1, visual: 1}, left: {render: 3, visual: 5}, right: {render: 5, visual: 7}, bottom: {render: 7, visual: 3}}
dockedItems A component or series of components to be added as docked items to this panel. The docked items can be docked to either the top, right, left or bottom of a panel. This is typically used for things like toolbars or tab bars:
var panel = new Ext.panel.Panel({
            fullscreen: true,
            dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
            text: 'Docked to the top'
            }]
            }]
            });

Properties

Name Description
isPanel true in this class to identify an object as an instantiated Panel, or subclass thereof. Defaults to: true
© Copyright 2005-2011 SharpKit. All rights reserved.