Sencha Documentation

Section of a Grid. Headers are docked in this area and this class synchronizes the viewable area and headers. Locked Sections - cannot flex headers. - must have a fixed width Virtualized (non locked) or Scrollable Sections must be synchronized vertically. Sections can resize based off of header size/visibility changes. Templates can become dirty based off of visibility changes.

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

 
preventHeader : Boolean
Prevent a Header from being created and shown. Defaults to false.
Prevent a Header from being created and shown. Defaults to false.
 
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)).

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.
 
hasGridView : Object
Boolean to indicate that GridView has been injected into this Grid Section.
Boolean to indicate that GridView has been injected into this Grid Section.
 
headerCt : Object
-> colModel?
-> colModel?

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
 
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
 
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.
 
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
 
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
 
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
 
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