Panel is a container that has specific functionality and structural components that make
it the perfect building block for application-oriented user interfaces.
Panels are, by virtue of their inheritance from Ext.Container, capable
of being configured with a layout, and containing child Components.
When either specifying child items of a Panel, or dynamically adding Components
to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether
those child elements need to be sized using one of Ext's built-in layout
schemes. By
default, Panels use the ContainerLayout scheme. This simply renders
child components, appending them one after the other inside the Container, and does not apply any sizing
at all.
A Panel may also contain bottom and top toolbars, along with separate
header, footer and body sections (see frame for additional
information).
Panel also provides built-in expandable and collapsible behavior, along with
a variety of prebuilt tool buttons that can be wired up to provide other customized
behavior. Panels can be easily dropped into any Container or layout, and the
layout and rendering pipeline is completely managed by the framework.
Note: By default, the close
header tool destroys the Window resulting in
destruction of any child Components. This makes the Window object, and all its descendants unusable. To enable
re-use of a Window, use closeAction: 'hide'
.
The base CSS class to apply to this panel's element (defaults to 'x-panel'
).
The base CSS class to apply to this panel's element (defaults to 'x-panel'
).
A shortcut for setting a border style on the body element. The value can either be
a number to be applied to all side...
A shortcut for setting a border style on the body element. The value can either be
a number to be applied to all sides, or a normal css string describing borders.
Defaults to undefined.
A shortcut for setting a margin style on the body element. The value can either be
a number to be applied to all side...
A shortcut for setting a margin style on the body element. The value can either be
a number to be applied to all sides, or a normal css string describing margins.
Defaults to undefined.
A shortcut for setting a padding style on the body element. The value can either be
a number to be applied to all sid...
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.
A component or series of components to be added as docked items to this panel.
The docked items can be docked to eith...
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({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Docked to the bottom'
}]
}]
});
addDocked(
Object/Array component., [Number pos] ) : Void
Adds docked item(s) to the panel.
Adds docked item(s) to the panel.
Parameters
- component. : Object/Array
The Component or array of components to add. The components
must include a 'dock' parameter on each component to indicate where it should be docked ('top', 'right',
'bottom', 'left').
- pos : Number
(optional) The index at which the Component will be added
Returns
Attempts a default component lookup (see Ext.container.Container.getComponent). If the component is not found in the ...
Attempts a default component lookup (see
Ext.container.Container.getComponent). If the component is not found in the normal
items, the dockedItems are searched and the matched component (if any) returned (see {@loink #getDockedComponent}). Note that docked
items will only be matched by component id or itemId -- if you pass a numeric index only non-docked child components will be searched.
Parameters
Returns
- Ext.Component The component (if found)
Finds a docked component by id, itemId or position
Finds a docked component by id, itemId or position
Parameters
- comp : String/Number
The id, itemId or position of the docked component (see
getComponent for details)
Returns
- Ext.Component The docked component (if found)
Retrieve an array of all currently docked components.
Retrieve an array of all currently docked components.
Inserts docked item(s) to the panel at the indicated position.
Inserts docked item(s) to the panel at the indicated position.
Parameters
- pos : Number
The index at which the Component will be inserted
- component. : Object/Array
The Component or array of components to add. The components
must include a 'dock' paramater on each component to indicate where it should be docked ('top', 'right',
'bottom', 'left').
Returns
removeDocked(
Ext.Component item., [Boolean autoDestroy] ) : Void
Removes the docked item from the panel.
Removes the docked item from the panel.
Parameters
Returns
bodyresize(
Ext.Panel p, Number width, Number height )
Fires after the Panel has been resized.
Fires after the Panel has been resized.
Parameters
- p : Ext.Panel
the Panel which has been resized.
- width : Number
The Panel body's new width.
- height : Number
The Panel body's new height.
Returns