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
is true, use
defaultAlign
to control tooltip alignment to the
target element. When anchorToTarget
is false, use
anchorPosition
instead to control alignment.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.dismissDelay
has expired if set (defaults to true). If closable = true
a close tool button will be rendered into the tooltip header.'x-panel'
).'x-panel'
).The action to take when the close header tool is clicked:
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 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 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 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.header
: 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
).'x-panel-collapsed'
).'x-panel-collapsed'
).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 collapseDirectionOptional. 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;
}
}
});
});
var panel = new Ext.Panel({
fullscreen: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Docked to the bottom'
}]
}]
});
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).'top'
, 'bottom'
, 'left'
or 'right'
. Defaults to 'top'
.'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
).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.
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 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.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.
// Show the tip at x:50 and y:100
tip.showAt([50,100]);
// 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');