Sencha Documentation

Config Options

 
anchor : String
If specified, indicates that the tip should be anchored to a particular side of the target element or mouse pointer (...
If specified, indicates that the tip should be anchored to a particular side of the target element or mouse pointer ("top", "right", "bottom", or "left"), with an arrow pointing back at the target or mouse pointer. If constrainPosition is enabled, this will be used as a preferred value only and may be flipped as needed.
 
anchorOffset : Number
A numeric pixel value used to offset the default position of the anchor arrow (defaults to 0). When the anchor posit...
A numeric pixel value used to offset the default position of the anchor arrow (defaults to 0). When the anchor position is on the top or bottom of the tooltip, anchorOffset will be used as a horizontal offset. Likewise, when the anchor position is on the left or right side, anchorOffset will be used as a vertical offset.
 
anchorToTarget : Boolean
True to anchor the tooltip to the target element, false to anchor it relative to the mouse coordinates (defaults to t...
True to anchor the tooltip to the target element, false to anchor it relative to the mouse coordinates (defaults to true). When anchorToTarget is true, use defaultAlign to control tooltip alignment to the target element. When anchorToTarget is false, use anchorPosition instead to control alignment.
 
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.
 
autoHide : Boolean
True to automatically hide the tooltip after the mouse exits the target element or after the dismissDelay has expired...
True to automatically hide the tooltip after the mouse exits the target element or after the dismissDelay has expired if set (defaults to true). If closable = true a close tool button will be rendered into the tooltip header.
 
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 render a close tool button into the tooltip header (defaults to false).
True to render a close tool button into the tooltip header (defaults to false).
 
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
 
If true, then the tooltip will be automatically constrained to stay within the browser viewport. Defaults to false.
If true, then the tooltip will be automatically constrained to stay within the browser viewport. Defaults to false.
 
defaultAlign : String
Experimental. The default Ext.core.Element.alignTo anchor position value for this tip relative to its element of orig...
Experimental. The default Ext.core.Element.alignTo anchor position value for this tip relative to its element of origin (defaults to "tl-bl?").
 
delegate : String
Optional. A DomQuery selector which allows selection of individual elements within the target element to trigger show...

Optional. A DomQuery selector which allows selection of individual elements within the target element to trigger showing and hiding the ToolTip as the mouse moves within the target.

When specified, the child element of the target which caused a show event is placed into the triggerElement property before the ToolTip is shown.

This may be useful when a Component has regular, repeating elements in it, each of which need a Tooltip which contains information specific to that element. For example:

var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on('render', function(grid) {
    var store = grid.getStore();  // Capture the Store.
    var view = grid.getView();    // Capture the GridView.
    myGrid.tip = new Ext.tip.ToolTip({
        target: view.mainBody,    // The overall target element.
        delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
        trackMouse: true,         // Moving within the row should not hide the tip.
        renderTo: document.body,  // Render immediately so that tip.body can be
                                  //  referenced prior to the first show.
        listeners: {              // Change content dynamically depending on which element
                                  //  triggered the show.
            beforeshow: function updateTipBody(tip) {
                var rowIndex = view.findRowIndex(tip.triggerElement);
                tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
            }
        }
    });
});
 
dismissDelay : Number
Delay in milliseconds before the tooltip automatically hides (defaults to 5000). To disable automatic hiding, set dis...
Delay in milliseconds before the tooltip automatically hides (defaults to 5000). To disable automatic hiding, set dismissDelay = 0.
 
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).
 
hideDelay : Number
Delay in milliseconds after the mouse exits the target element but before the tooltip actually hides (defaults to 200...
Delay in milliseconds after the mouse exits the target element but before the tooltip actually hides (defaults to 200). Set to 0 for the tooltip to hide immediately.
 
interceptTitles : Boolean
True to automatically use the element's DOM title value if available (defaults to false).
True to automatically use the element's DOM title value if available (defaults to false).
 
maxWidth : Number
The maximum width of the tip in pixels (defaults to 300). The maximum supported value is 500.
The maximum width of the tip in pixels (defaults to 300). The maximum supported value is 500.
 
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.
 
minWidth : Number
The minimum width of the tip in pixels (defaults to 40).
The minimum width of the tip in pixels (defaults to 40).
 
mouseOffset : Array
An XY offset from the mouse position where the tooltip should be shown (defaults to [15,18]).
An XY offset from the mouse position where the tooltip should be shown (defaults to [15,18]).
 
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.
 
shadow : Boolean/String
True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "si...
True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "sides").
 
showDelay : Number
Delay in milliseconds before the tooltip displays after the mouse enters the target element (defaults to 500)
Delay in milliseconds before the tooltip displays after the mouse enters the target element (defaults to 500)
 
target : Mixed
The target HTMLElement, Ext.core.Element or id to associate with this Quicktip (defaults to the document).
The target HTMLElement, Ext.core.Element or id to associate with this Quicktip (defaults to the document).
 
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)).
 
trackMouse : Boolean
True to have the tooltip follow the mouse as it moves over the target element (defaults to false).
True to have the tooltip follow the mouse as it moves over the target element (defaults to false).
 
width : Number
Width in pixels of the tip (defaults to auto). Width will be ignored if it exceeds the bounds of minWidth or maxWidt...
Width in pixels of the tip (defaults to auto). Width will be ignored if it exceeds the bounds of minWidth or maxWidth. The maximum supported value is 500.

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.
 
triggerElement : DOMElement
When a Tooltip is configured with the delegate option to cause selected child elements of the target Element to each ...
When a Tooltip is configured with the delegate option to cause selected child elements of the target Element to each trigger a seperate show event, this property is set to the DOM element which triggered the show.

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
 
cancelShow( String/HTMLElement/Element el ) : Void
Hides a visible tip or cancels an impending show for a particular element.
Hides a visible tip or cancels an impending show for a particular element.

Parameters

  • el : String/HTMLElement/Element
    The element that is the target of the tip.

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.
 
hide : Void
Hides this tooltip if visible.
Hides this tooltip if visible.
 
initTarget( Mixed t ) : Void
Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.
Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.

Parameters

  • t : Mixed
    The Element, HtmlElement, or ID of an element to bind to

Returns

  • Void
 
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
 
register( Object config ) : Void
Configures a new quick tip instance and assigns it to a target element. The following config values are supported (f...
Configures a new quick tip instance and assigns it to a target element. The following config values are supported (for example usage, see the Ext.tip.QuickTips class header):
  • autoHide
  • cls
  • dismissDelay (overrides the singleton value)
  • target (required)
  • text (required)
  • title
  • width

Parameters

  • config : Object
    The config object

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
 
show : Void
Shows this tooltip at the current event target XY position.
Shows this tooltip at the current event target XY position.
 
showAt( Array xy ) : Void
Shows this tip at the specified XY position. Example usage: // Show the tip at x:50 and y:100 tip.showAt([50,100]);
Shows this tip at the specified XY position. Example usage:
// Show the tip at x:50 and y:100
tip.showAt([50,100]);

Parameters

  • xy : Array
    An array containing the x and y coordinates

Returns

  • Void
 
showBy( Mixed el, [String position] ) : Void
Experimental. Shows this tip at a position relative to another element using a standard Ext.core.Element.alignTo anch...
Experimental. Shows this tip at a position relative to another element using a standard Ext.core.Element.alignTo anchor position value. Example usage:
// Show the tip at the default position ('tl-br?')
tip.showBy('my-el');

// Show the tip's top-left corner anchored to the element's top-right corner
tip.showBy('my-el', 'tl-tr');

Parameters

  • el : Mixed
    An HTMLElement, Ext.core.Element or string id of the target element to align to
  • position : String
    (optional) A valid Ext.core.Element.alignTo anchor position (defaults to 'tl-br?' or defaultAlign if specified).

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.
 
unregister( String/HTMLElement/Element el ) : Void
Removes this quick tip from its element and destroys it.
Removes this quick tip from its element and destroys it.

Parameters

  • el : String/HTMLElement/Element
    The element from which the quick tip is to be removed.

Returns

  • Void

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