Sencha Documentation

Config Options

 
animCollapse : Boolean
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.
 
baseCls : String
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').
 
bodyBorder : Number/Boolean
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.
 
bodyMargin : Number/Boolean
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.
 
bodyPadding : Number/Boolean
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.
 
The text to display on the cancel button (defaults to 'Cancel')
The text to display on the cancel button (defaults to 'Cancel')
 
closable : Boolean
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'.

 
closeAction : String
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'.

 
collapseFirst : Boolean
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).
 
collapseMode : String
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:

  • alt : Default.
    When collapsed, a placeholder Container is injected into the layout to represent the Panel and to provide a UI with a Tool to allow the user to re-expand the Panel.
  • header :
    The Panel collapses to leave a header visible as when not inside a border layout.

 
collapsed : Boolean
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).
 
collapsedCls : String
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').
 
collapsible : Boolean
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
 
dockedItems : Object/Array
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'
        }]
    }]
});
 
fieldDefaults : Object
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.

 
floatable : Boolean
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).
 
frame : Boolean
True to apply a frame to the panel.
True to apply a frame to the panel.
 
Specify as 'top', 'bottom', 'left' or 'right'. Defaults to 'top'.
Specify as 'top', 'bottom', 'left' or 'right'. Defaults to 'top'.
 
true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).
true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).
 
ignoreFieldRe : RegExp
Regex that matches any fields that should be ignored. Any fields that match this regex will not be included in the fo...
Regex that matches any fields that should be ignored. Any fields that match this regex will not be included in the form. The default regex just ignores any fields ending in "_id"
 
layout : String
The Ext.container.Container.layout for the form panel's immediate child items. Defaults to 'anchor'.
The Ext.container.Container.layout for the form panel's immediate child items. Defaults to 'anchor'.
 
Minimum width of all form buttons in pixels (defaults to 75). If set, this will be used as the default value for the ...
Minimum width of all form buttons in pixels (defaults to 75). If set, this will be used as the default value for the Ext.form.Button.minWidth config of each Button added to the footer toolbar. Will be ignored for buttons that have this value configured some other way, e.g. in their own config object or via the defaults config of their parent container.
 
model : String/Function
The model to create the scaffold for
The model to create the scaffold for
 
placeHolder : Mixed
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.

 
pollForChanges : Boolean
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.
 
pollInterval : Number
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.
 
preventHeader : Boolean
Prevent a Header from being created and shown. Defaults to false.
Prevent a Header from being created and shown. Defaults to false.
 
The text to display on the save button (defaults to 'Save')
The text to display on the save button (defaults to 'Save')
 
textAreaRe : Regex
Regex that matches any model fields that should be turned into a textarea
Regex that matches any model fields that should be turned into a textarea
 
titleCollapse : Boolean
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)).
 
titleFormat : String
A string suitable for passing into Ext.String.format to generate the title text
A string suitable for passing into Ext.String.format to generate the title text
 
toolbarDock : String
The dock location for the toolbar. Defaults to 'bottom'
The dock location for the toolbar. Defaults to 'bottom'

Properties

 
dd : Ext.dd.DragSource.
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.

Methods

 
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

  • Void
 
Returns an array of form items to create for the scaffold. The configured model's fields are reflected upon and autom...
Returns an array of form items to create for the scaffold. The configured model's fields are reflected upon and automatically turned into the appropriate form item types
 
buildToolbar : Ext.Toolbar
Creates and returns a toolbar containing (by default) save and cancel buttons
Creates and returns a toolbar containing (by default) save and cancel buttons
 
Forces each field within the form panel to check if its value has changed.
Forces each field within the form panel to check if its value has changed.
 
close : Void
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

  • Ext.panel.Panel   this
 
disable( Boolean silent ) : Void
Disable the FormPanel component and all the fields within it.
Disable the FormPanel component and all the fields within it.

Parameters

  • silent : Boolean
    Passing true, will supress the 'disable' event from being fired.

Returns

  • Void
 
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

  • silent : Boolean
    Passing false will supress the 'enable' event from being fired.

Returns

  • Void
 
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

  • Ext.panel.Panel   this
 
getComponent( String/Number comp ) : Ext.Component
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

  • comp : String/Number
    The component id, itemId or position to find

Returns

  • Ext.Component   The component (if found)
 
getDockedComponent( String/Number comp ) : Ext.Component
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.
 
getFieldType( Ext.data.Field field ) : String
Returns the xtype string for the best form field to create for a given field from a Model definition
Returns the xtype string for the best form field to create for a given field from a Model definition

Parameters

  • field : Ext.data.Field
    The field

Returns

  • String   The xtype
 
getForm : Ext.form.Basic
Provides access to the Form which this Panel contains.
Provides access to the Form which this Panel contains.
 
insertDocked( Number pos, Object/Array component. ) : Void
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

  • Void
 
load( Object options ) : Void
This is a proxy for the underlying BasicForm's Ext.form.Basic.load call.
This is a proxy for the underlying BasicForm's Ext.form.Basic.load call.

Parameters

Returns

  • Void
 
Handler tied to the cancel button. By default this just fires the 'cancel' event
Handler tied to the cancel button. By default this just fires the 'cancel' event
 
Handler tied to the save button. By default this just fires the 'save' event
Handler tied to the save button. By default this just fires the 'save' event
 
removeDocked( Ext.Component item., [Boolean autoDestroy] ) : Void
Removes the docked item from the panel.
Removes the docked item from the panel.

Parameters

  • item. : Ext.Component
    The Component to remove.
  • autoDestroy : Boolean
    (optional) Destroy the component after removal.

Returns

  • Void
 
setIconClass( cls undefined ) : Void
Set the iconCls for the panel's header. See Ext.panel.Header.iconCls.
Set the iconCls for the panel's header. See Ext.panel.Header.iconCls.

Parameters

  • undefined : cls

Returns

  • Void
 
setModel( String/Function model ) : Void
Sets the model used by this scaffold. Can pass in the model string name or the model constructor
Sets the model used by this scaffold. Can pass in the model string name or the model constructor

Parameters

  • model : String/Function
    The model to set

Returns

  • Void
 
setTitle( String title ) : Void
Set a title for the panel's header. See Ext.panel.Header.title.
Set a title for the panel's header. See Ext.panel.Header.title.

Parameters

  • title : String

Returns

  • Void
 
startPolling( Number interval ) : Void
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

  • interval : Number
    The interval in milliseconds at which the check should run.

Returns

  • Void
 
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.
This is a proxy for the underlying BasicForm's Ext.form.Basic.submit call.

Parameters

Returns

  • Void
 
toggleCollapse : Ext.panel.Panel
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.

Events

 
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

  • Void
 
cancel( Ext.scaffold.Build scaffold )
Fires when the user wishes to cancel the creation of the new model instance
Fires when the user wishes to cancel the creation of the new model instance

Parameters

  • scaffold : Ext.scaffold.Build
    The scaffold form

Returns

  • Void
 
save( Ext.scaffold.Build scaffold )
Fires when the user wishes to save the new model instance
Fires when the user wishes to save the new model instance

Parameters

  • scaffold : Ext.scaffold.Build
    The scaffold form

Returns

  • Void