2 * @class Ext.panel.Tool
3 * @extends Ext.Component
5 This class is used to display small visual icons in the header of a panel. There are a set of
6 25 icons that can be specified by using the {@link #type} config. The {@link #handler} config
7 can be used to provide a function that will respond to any click events. In general, this class
8 will not be instantiated directly, rather it will be created by specifying the {@link Ext.panel.Panel#tools}
9 configuration on the Panel itself.
13 Ext.create('Ext.panel.Panel', {
16 renderTo: document.body,
32 handler: function(event, target, owner, tool){
34 owner.child('#refresh').show();
42 Ext.define('Ext.panel.Tool', {
43 extend: 'Ext.Component',
44 requires: ['Ext.tip.QuickTipManager'],
47 baseCls: Ext.baseCSSPrefix + 'tool',
48 disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
49 toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
50 toolOverCls: Ext.baseCSSPrefix + 'tool-over',
52 renderTpl: ['<img src="{blank}" class="{baseCls}-{type}" role="presentation"/>'],
55 * @cfg {Function} handler
56 * A function to execute when the tool is clicked.
57 * Arguments passed are:
59 * <li><b>event</b> : Ext.EventObject<div class="sub-desc">The click event.</div></li>
60 * <li><b>toolEl</b> : Ext.core.Element<div class="sub-desc">The tool Element.</div></li>
61 * <li><b>panel</b> : Ext.panel.Panel<div class="sub-desc">The host Panel</div></li>
62 * <li><b>tool</b> : Ext.panel.Tool<div class="sub-desc">The tool object</div></li>
68 * The scope to execute the {@link #handler} function. Defaults to the tool.
73 * The type of tool to render. The following types are available:
104 * @cfg {String/Object} tooltip
105 * The tooltip for the tool - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
109 * @cfg {Boolean} stopEvent
110 * Defaults to true. Specify as false to allow click event to propagate.
114 initComponent: function() {
119 * Fires when the tool is clicked
120 * @param {Ext.panel.Tool} this
121 * @param {Ext.EventObject} e The event object
155 if (me.id && Ext.Array.indexOf(types, me.id) > -1) {
156 Ext.global.console.warn('When specifying a tool you should use the type option, the id can conflict now that tool is a Component');
160 me.type = me.type || me.id;
162 Ext.applyIf(me.renderData, {
164 blank: Ext.BLANK_IMAGE_URL,
167 me.renderSelectors.toolEl = '.' + me.baseCls + '-' + me.type;
172 afterRender: function() {
174 me.callParent(arguments);
176 if (Ext.isObject(me.qtip)) {
177 Ext.tip.QuickTipManager.register(Ext.apply({
182 me.toolEl.dom.qtip = me.qtip;
188 mousedown: me.onMouseDown,
189 mouseover: me.onMouseOver,
190 mouseout: me.onMouseOut,
196 * Set the type of the tool. Allows the icon to be changed.
197 * @param {String} type The new type. See the {@link #type} config.
198 * @return {Ext.panel.Tool} this
200 setType: function(type) {
205 me.toolEl.dom.className = me.baseCls + '-' + type;
211 * Binds this tool to a component.
213 * @param {Ext.Component} component The component
215 bindTo: function(component) {
216 this.owner = component;
220 * Fired when the tool element is clicked
222 * @param {Ext.EventObject} e
223 * @param {HTMLElement} target The target element
225 onClick: function(e, target) {
232 owner = me.owner || me.ownerCt;
234 //remove the pressed + over class
235 me.el.removeCls(me.toolPressedCls);
236 me.el.removeCls(me.toolOverCls);
238 if (me.stopEvent !== false) {
242 Ext.callback(me.handler, me.scope || me, [e, target, owner, me]);
243 me.fireEvent('click', me, e);
248 onDestroy: function(){
249 if (Ext.isObject(this.tooltip)) {
250 Ext.tip.QuickTipManager.unregister(this.id);
256 * Called then the user pressing their mouse button down on a tool
257 * Adds the press class ({@link #toolPressedCls})
260 onMouseDown: function() {
265 this.el.addCls(this.toolPressedCls);
269 * Called when the user rolls over a tool
270 * Adds the over class ({@link #toolOverCls})
273 onMouseOver: function() {
277 this.el.addCls(this.toolOverCls);
281 * Called when the user rolls out from a tool.
282 * Removes the over class ({@link #toolOverCls})
285 onMouseOut: function() {
286 this.el.removeCls(this.toolOverCls);