FormPanel provides a standard container for forms. It is essentially a standard Ext.panel.Panel which
automatically creates a BasicForm for managing any Ext.form.Field
objects that are added as descendants of the panel. It also includes conveniences for configuring and
working with the BasicForm and the collection of Fields.
Layout
By default, FormPanel is configured with layout:'anchor' for
the layout of its immediate child items. This can be changed to any of the supported container layouts.
The layout of sub-containers is configured in the standard way.
BasicForm
Although not listed as configuration options of FormPanel, the FormPanel class accepts all
of the config options supported by the Ext.form.Basic class, and will pass them along to
the internal BasicForm when it is created.
Note: If subclassing FormPanel, any configuration options for the BasicForm must be applied to
the initialConfig property of the FormPanel. Applying BasicForm
configuration settings to this will not affect the BasicForm's configuration.
The following events fired by the BasicForm will be re-fired by the FormPanel and can therefore be
listened for on the FormPanel itself:
Field Defaults
The fieldDefaults config option conveniently allows centralized configuration of default values
for all field-labelable added as descendants of the FormPanel. Any config option recognized by implementations
of Ext.form.Labelable may be included in this object. See the fieldDefaults documentation
for details of how the defaults are applied.
Form Validation
With the default configuration, form fields are validated on the fly while the user edits their values.
This can be controlled on a per-field basis (or via the fieldDefaults config) with the field
config properties Ext.form.Field.validateOnChange and Ext.form.BaseField.checkChangeEvents,
and the FormPanel's config properties pollForChanges and pollInterval.
Any component within the FormPanel can be configured with formBind: true. This will cause that
component to be automatically disabled when the form is invalid, and enabled when it is valid. This is most
commonly used for Button components to prevent submitting the form in an invalid state, but can be used on
any component type.
For more information on form validation see the following:
Form Submission
By default, Ext Forms are submitted through Ajax, using Ext.form.action.Action. See the documentation for
Ext.form.Basic
true to animate the transition when the panel is collapsed, false to skip the
animation (defaults to true if the Ext....
true
to animate the transition when the panel is collapsed,
false
to skip the
animation (defaults to
true
if the
Ext.Fx class is available, otherwise
false
).
May also be specified as the animation duration in milliseconds.
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.
True to display the 'close' tool button and allow the user to close the window, false to
hide the button and disallow...
True to display the 'close' tool button and allow the user to close the window, false to
hide the button and disallow closing the window (defaults to false
).
By default, when close is requested by clicking the close button in the header, the close
method will be called. This will destroy the Panel and its content
meaning that it may not be reused.
To make closing a Panel hide the Panel so that it may be reused, set
closeAction to 'hide'.
The action to take when the close header tool is clicked:
<div class="mdetail-params">
'close' : Default<div class="s...
The action to take when the close header tool is clicked:
'close'
: Default
remove the window from the DOM and
destroy
it and all descendant Components. The window will
not be available to be
redisplayed via the
show method.
'hide'
:
hide the window by setting visibility to hidden and applying negative offsets.
The window will be available to be redisplayed via the
show method.
Note: This behavior has changed! setting *does* affect the close method
which will invoke the approriate closeAction.
The direction to collapse the Panel when the toggle button is clicked.
Defaults to the headerPosition
Important: This...
The direction to collapse the Panel when the toggle button is clicked.
Defaults to the headerPosition
Important: This config is ignored for collapsible Panels which are direct child items of a border layout.
Specify as 'top'
, 'bottom'
, 'left'
or 'right'
.
true to make sure the collapse/expand toggle button always renders first (to the left of)
any other tools in the pane...
true
to make sure the collapse/expand toggle button always renders first (to the left of)
any other tools in the panel's title bar, false
to render it last (defaults to true
).
Important: this config is only effective for collapsible Panels which are direct child items of a border layout.
When...
Important: this config is only effective for collapsible Panels which are direct child items of a border layout.
When not a direct child item of a border layout, then the Panel's header remains visible, and the body is collapsed to zero dimensions.
If the Panel has no header, then a new header (orientated correctly depending on the collapseDirection) will be inserted to show a the title and a re-expand tool.
When a child item of a border layout, this config has two options:
true
to render the panel collapsed, false
to render it expanded (defaults to
false
).
true
to render the panel collapsed, false
to render it expanded (defaults to
false
).
A CSS class to add to the panel's element after it has been collapsed (defaults to
'x-panel-collapsed'
).
A CSS class to add to the panel's element after it has been collapsed (defaults to
'x-panel-collapsed'
).
True to make the panel collapsible and have an expand/collapse toggle Tool added into
the header tool button area. Fa...
True to make the panel collapsible and have an expand/collapse toggle Tool added into
the header tool button area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool (defaults to false).
See
collapseMode and
collapseDirection 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'
}]
}]
});
If specified, the properties in this object are used as default config values for each
Ext.form.Labelable instance (e...
If specified, the properties in this object are used as default config values for each
Ext.form.Labelable instance (e.g. Ext.form.Field or Ext.form.FieldContainer)
that is added as a descendant of this FormPanel. Corresponding values specified in an individual field's
own configuration, or from the defaults config of its parent container,
will take precedence. See the documentation for Ext.form.Labelable to see what config
options may be specified in the fieldDefaults.
Example:
new Ext.form.FormPanel({
fieldDefaults: {
labelAlign: 'left',
labelWidth: 100
},
items: [{
xtype: 'fieldset',
defaults: {
labelAlign: 'top'
},
items: [{
name: 'field1'
}, {
name: 'field2'
}]
}, {
xtype: 'fieldset',
items: [{
name: 'field3',
labelWidth: 150
}, {
name: 'field4'
}]
}]
});
In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's defaults)
and labelWidth:100 (from fieldDefaults), field3 and field4 will both get labelAlign:'left' (from
fieldDefaults and field3 will use the labelWidth:150 from its own config.
Important: This config is only effective for collapsible Panels which are direct child items of a border layout.
true...
Important: This config is only effective for collapsible Panels which are direct child items of a border layout.
true to allow clicking a collapsed Panel's
placeHolder to display the Panel floated
above the layout,
false to force the user to fully expand a collapsed region by
clicking the expand button to see it again (defaults to
true).
True to apply a frame to the panel.
True to apply a frame to the panel.
Important: This config is only effective for collapsible Panels which are direct child items of a border layout
when ...
Important: This config is only effective for collapsible Panels which are direct child items of a border layout
when using the default 'alt'
collapseMode.
b>Optional. A Component (or config object for a Component) to show in place of this Panel when this Panel is collapsed by a
border layout. Defaults to a generated Header
containing a Tool to re-expand the Panel.
If set to true, sets up an interval task (using the pollInterval) in which the
panel's fields are repeatedly checked...
If set to
true, sets up an interval task (using the
pollInterval) in which the
panel's fields are repeatedly checked for changes in their values. This is in addition to the normal detection
each field does on its own input element, and is not needed in most cases. It does, however, provide a
means to absolutely guarantee detection of all changes including some edge cases in some browsers which
do not fire native events. Defaults to
false.
Interval in milliseconds at which the form's fields are checked for value changes. Only used if
the pollForChanges op...
Interval in milliseconds at which the form's fields are checked for value changes. Only used if
the
pollForChanges option is set to
true. Defaults to 500 milliseconds.
true to allow expanding and collapsing the panel (when collapsible = true)
by clicking anywhere in the header bar, fa...
true
to allow expanding and collapsing the panel (when
collapsible = true
)
by clicking anywhere in the header bar,
false
) to allow it only by clicking to tool button
(defaults to
false
)).
If this Panel is configured draggable, this property will contain
an instance of Ext.dd.DragSource which handles drag...
If this Panel is configured draggable, this property will contain
an instance of Ext.dd.DragSource which handles dragging the Panel.
The developer must provide implementations of the abstract methods of
Ext.dd.DragSource
in order to supply behaviour for each stage of the drag/drop process. See
draggable.
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
Forces each field within the form panel to
check if its value has changed.
Closes the Panel. By default, this method, removes it from the DOM, destroys
the Panel object and all its descendant ...
Closes the Panel. By default, this method, removes it from the DOM, destroys
the Panel object and all its descendant Components. The beforeclose
event is fired before the close happens and will cancel the close action if it returns false.
Note: This method is not affected by the closeAction setting which
only affects the action triggered when clicking the 'close' tool in the header.
To hide the Panel without destroying it, call hide.
collapse(
Number direction., Boolean animate ) : Ext.panel.Panel
Collapses the panel body so that the body becomes hidden. Docked Components parallel to the
border towards which the ...
Collapses the panel body so that the body becomes hidden. Docked Components parallel to the
border towards which the collapse takes place will remain visible. Fires the
beforecollapse event which will
cancel the collapse action if it returns false.
Parameters
- direction. : Number
The direction to collapse towards. Must be one of
- Ext.Component.DIRECTION_TOP
- Ext.Component.DIRECTION_RIGHT
- Ext.Component.DIRECTION_BOTTOM
- Ext.Component.DIRECTION_LEFT
- animate : Boolean
True to animate the transition, else false (defaults to the value of the
animCollapse panel config)
Returns
Disable the FormPanel component and all the fields within it.
Disable the FormPanel component and all the fields within it.
Parameters
Returns
enable(
Boolean silent ) : Void
Enable the FormPanel component and all the fields within it.
Enable the FormPanel component and all the fields within it.
Parameters
Returns
expand(
Boolean animate ) : Ext.panel.Panel
Expands the panel body so that it becomes visible. Fires the beforeexpand event which will
cancel the expand action ...
Expands the panel body so that it becomes visible. Fires the
beforeexpand event which will
cancel the expand action if it returns false.
Parameters
- animate : Boolean
True to animate the transition, else false (defaults to the value of the
animCollapse panel config)
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
load(
Object options ) : Void
This is a proxy for the underlying BasicForm's Ext.form.Basic.load call.
removeDocked(
Ext.Component item., [Boolean autoDestroy] ) : Void
Removes the docked item from the panel.
Removes the docked item from the panel.
Parameters
Returns
Set the iconCls for the panel's header. See Ext.panel.Header.iconCls.
Set a title for the panel's header. See Ext.panel.Header.title.
Start an interval task to continuously poll all the fields in the form for changes in their
values. This is normally ...
Start an interval task to continuously poll all the fields in the form for changes in their
values. This is normally started automatically by setting the
pollForChanges config.
Parameters
Returns
Stop a running interval task that was started by startPolling.
Stop a running interval task that was started by
startPolling.
submit(
Object options ) : Void
This is a proxy for the underlying BasicForm's Ext.form.Basic.submit call.
Shortcut for performing an expand or collapse based on the current state of the panel.
Shortcut for performing an
expand or
collapse based on the current state of the panel.
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