Sencha Documentation

A specialized panel intended for use as an application window. Windows are floated, resizable, and draggable by default. Windows can be maximized to fill the viewport, restored to their prior size, and can be minimized.

Windows can also be linked to a Ext.window.WindowGroup or managed by the Ext.window.WindowMgr to provide grouping, activation, to front, to back and other application-specific behavior.

By default, Windows will be rendered to document.body. To constrain a Window to another element specify renderTo.

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.
 
animateTarget : String/Element
Id or element from which the window should animate while opening (defaults to null with no animation).
Id or element from which the window should animate while opening (defaults to null with no animation).
 
baseCls : String
The base CSS class to apply to this panel's element (defaults to 'x-window').
The base CSS class to apply to this panel's element (defaults to 'x-window').
 
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 true).

By default, when close is requested by either clicking the close button in the header or pressing ESC when the Window has focus, the close method will be called. This will destroy the Window and its content meaning that it may not be reused.

To make closing a Window hide the Window 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 window collapsed, false to render it expanded (defaults to false). Note that if expandOnShow is tr...
True to render the window collapsed, false to render it expanded (defaults to false). Note that if expandOnShow is true (the default) it will override the collapsed config and the window will always be expanded when shown.
 
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
 
constrain : Boolean
True to constrain the window within its containing element, false to allow it to fall outside of its containing eleme...
True to constrain the window within its containing element, false to allow it to fall outside of its containing element. By default the window will be rendered to document.body. To render and constrain the window within another element specify renderTo. (defaults to false). Optionally the header only can be constrained using constrainHeader.
 
constrainHeader : Boolean
True to constrain the window header within its containing element (allowing the window body to fall outside of its co...
True to constrain the window header within its containing element (allowing the window body to fall outside of its containing element) or false to allow the header to fall outside its containing element (defaults to false). Optionally the entire window can be constrained using constrain.
 
defaultFocus : String/Number/Component
Specifies a Component to receive focus when this Window is focused. This may be one of:<div class="mdetail-params"> T...

Specifies a Component to receive focus when this Window is focused.

This may be one of:

 
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'
        }]
    }]
});
 
draggable : Boolean
True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true). Note that by...

True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true). Note that by default the window will be centered in the viewport, so if dragging is disabled the window may need to be positioned programmatically after render (e.g., myWindow.setPosition(100, 100);).

 
expandOnShow : Boolean
True to always expand the window when it is displayed, false to keep it in its current state (which may be collapsed)...
True to always expand the window when it is displayed, false to keep it in its current state (which may be collapsed) when displayed (defaults to true).
 
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'.
 
hidden : Boolean
Render this Window hidden (default is true). If true, the hide method will be called internally.
Render this Window hidden (default is true). If true, the hide method will be called internally.
 
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).
 
maximizable : Boolean
True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button and di...
True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button and disallow maximizing the window (defaults to false). Note that when a window is maximized, the tool button will automatically change to a 'restore' button with the appropriate behavior already built-in that will restore the window to its previous size.
 
maximized : Boolean
True to initially display the window in a maximized state. (Defaults to false).
True to initially display the window in a maximized state. (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.
 
minHeight : Number
The minimum height in pixels allowed for this window (defaults to 100). Only applies when resizable is set.
The minimum height in pixels allowed for this window (defaults to 100). Only applies when resizable is set.
 
minWidth : Number
The minimum width in pixels allowed for this window (defaults to 200). Only applies when resizable is set.
The minimum width in pixels allowed for this window (defaults to 200). Only applies when resizable is set.
 
minimizable : Boolean
True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button and di...
True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button and disallow minimizing the window (defaults to false). Note that this button provides no implementation -- the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a custom minimize behavior implemented for this option to be useful.
 
modal : Boolean
True to make the window modal and mask everything behind it when displayed, false to display it without restricting a...
True to make the window modal and mask everything behind it when displayed, false to display it without restricting access to other UI elements (defaults to false).
 
onEsc : Function
Allows override of the built-in processing for the escape key. Default action is to close the Window (performing what...
Allows override of the built-in processing for the escape key. Default action is to close the Window (performing whatever action is specified in closeAction. To prevent the Window closing when the escape key is pressed, specify this as Ext.emptyFn (See Ext.emptyFn).
 
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.

 
plain : Boolean
True to render the window body with a transparent background so that it will blend into the framing elements, false t...
True to render the window body with a transparent background so that it will blend into the framing elements, false to add a lighter background color to visually highlight the body element and separate it more distinctly from the surrounding frame (defaults to false).
 
preventHeader : Boolean
Prevent a Header from being created and shown. Defaults to false.
Prevent a Header from being created and shown. Defaults to false.
 
resizable : Mixed
Specify as true to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to ...

Specify as true to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to true).

This may also be specified as a config object to

 
resizeHandles : String
A valid Ext.Resizable handles config string (defaults to 'all'). Only applies when resizable = true.
A valid Ext.Resizable handles config string (defaults to 'all'). Only applies when resizable = true.
 
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)).
 
x : Number
The X position of the left edge of the window on initial showing. Defaults to centering the Window within the width o...
The X position of the left edge of the window on initial showing. Defaults to centering the Window within the width of the Window's container Ext.core.Element Element) (The Element that the Window is rendered to).
 
y : Number
The Y position of the top edge of the window on initial showing. Defaults to centering the Window within the height o...
The Y position of the top edge of the window on initial showing. Defaults to centering the Window within the height of the Window's container Ext.core.Element Element) (The Element that the Window is rendered to).

Properties

 
dd : Ext.util.ComponentDragger
If this Window is configured draggable, this property will contain an instance of Ext.util.ComponentDragger (A subcla...

If this Window is configured draggable, this property will contain an instance of Ext.util.ComponentDragger (A subclass of DragTracker) which handles dragging the Window's DOM Element, and constraining according to the constrain and constrainHeader .

This has implementations of onBeforeStart, onDrag and onEnd which perform the dragging action. If extra logic is needed at these points, use createInterceptor or createSequence to augment the existing implementations.

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.
 
getFocusEl : Void
Gets the configured default focus item. If a defaultComponent is set, it will receive focus, otherwise the Container...
Gets the configured default focus item. If a defaultComponent is set, it will receive focus, otherwise the Container itself will receive focus.
 
hide( [String/Element animateTarget], [Function callback], [Object scope] ) : Ext.Window
Hides the window, setting it to invisible and applying negative offsets.
Hides the window, setting it to invisible and applying negative offsets.

Parameters

  • animateTarget : String/Element
    (optional) The target element or id to which the window should animate while hiding (defaults to null with no animation)
  • callback : Function
    (optional) A callback function to call after the window is hidden
  • scope : Object
    (optional) The scope (this reference) in which the callback is executed. Defaults to this Window.

Returns

  • Ext.Window   this
 
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
 
maximize : Ext.Window
Fits the window within its current container and automatically replaces the 'maximize' tool button with the 'restore'...
Fits the window within its current container and automatically replaces the 'maximize' tool button with the 'restore' tool button. Also see toggleMaximize.
 
minimize : Ext.Window
Placeholder method for minimizing the window. By default, this method simply fires the minimize event since the beha...
Placeholder method for minimizing the window. By default, this method simply fires the minimize event since the behavior of minimizing a window is application-specific. To implement custom minimize behavior, either the minimize event can be handled or this method can be overridden.
 
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
 
restore : Ext.Window
Restores a maximized window back to its original size and position prior to being maximized and also replaces the 'r...
Restores a maximized window back to its original size and position prior to being maximized and also replaces the 'restore' tool button with the 'maximize' tool button. Also see toggleMaximize.
 
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.
 
toggleMaximize : Ext.Window
A shortcut method for toggling between maximize and restore based on the current maximized state of the window.
A shortcut method for toggling between maximize and restore based on the current maximized state of the window.

Events

 
activate( Ext.Window this )
Fires after the window has been visually activated via setActive.
Fires after the window has been visually activated via setActive.

Parameters

  • this : Ext.Window

Returns

  • Void
 
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
 
deactivate( Ext.Window this )
Fires after the window has been visually deactivated via setActive.
Fires after the window has been visually deactivated via setActive.

Parameters

  • this : Ext.Window

Returns

  • Void
 
maximize( Ext.Window this )
Fires after the window has been maximized.
Fires after the window has been maximized.

Parameters

  • this : Ext.Window

Returns

  • Void
 
minimize( Ext.Window this )
Fires after the window has been minimized.
Fires after the window has been minimized.

Parameters

  • this : Ext.Window

Returns

  • Void
 
resize( Ext.Window this, Number width, Number height )
Fires after the window has been resized.
Fires after the window has been resized.

Parameters

  • this : Ext.Window
  • width : Number
    The window's new width
  • height : Number
    The window's new height

Returns

  • Void
 
restore( Ext.Window this )
Fires after the window has been restored to its original size after being maximized.
Fires after the window has been restored to its original size after being maximized.

Parameters

  • this : Ext.Window

Returns

  • Void