3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * This class is used to display small visual icons in the header of a panel. There are a set of
17 * 25 icons that can be specified by using the {@link #type} config. The {@link #handler} config
18 * can be used to provide a function that will respond to any click events. In general, this class
19 * will not be instantiated directly, rather it will be created by specifying the {@link Ext.panel.Panel#tools}
20 * configuration on the Panel itself.
23 * Ext.create('Ext.panel.Panel', {
26 * renderTo: document.body,
30 * handler: function(){
37 * handler: function(){
42 * handler: function(event, target, owner, tool){
44 * owner.child('#refresh').show();
49 Ext.define('Ext.panel.Tool', {
50 extend: 'Ext.Component',
51 requires: ['Ext.tip.QuickTipManager'],
54 baseCls: Ext.baseCSSPrefix + 'tool',
55 disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
56 toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
57 toolOverCls: Ext.baseCSSPrefix + 'tool-over',
59 renderTpl: ['<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation"/>'],
62 * @cfg {Function} handler
63 * A function to execute when the tool is clicked. Arguments passed are:
65 * - **event** : Ext.EventObject - The click event.
66 * - **toolEl** : Ext.Element - The tool Element.
67 * - **owner** : Ext.panel.Header - The host panel header.
68 * - **tool** : Ext.panel.Tool - The tool object
73 * The scope to execute the {@link #handler} function. Defaults to the tool.
78 * The type of tool to render. The following types are available:
80 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-close"></span> close
81 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-minimize"></span> minimize
82 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-maximize"></span> maximize
83 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-restore"></span> restore
84 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-toggle"></span> toggle
85 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-gear"></span> gear
86 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-prev"></span> prev
87 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-next"></span> next
88 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-pin"></span> pin
89 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-unpin"></span> unpin
90 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-right"></span> right
91 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-left"></span> left
92 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-down"></span> down
93 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-up"></span> up
94 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-refresh"></span> refresh
95 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-plus"></span> plus
96 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-minus"></span> minus
97 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-search"></span> search
98 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-save"></span> save
99 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-help"></span> help
100 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-print"></span> print
101 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-expand"></span> expand
102 * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-collapse"></span> collapse
106 * @cfg {String/Object} tooltip
107 * The tooltip for the tool - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config
112 * @cfg {String} tooltipType
113 * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
118 * @cfg {Boolean} stopEvent
119 * Specify as false to allow click event to propagate.
123 initComponent: function() {
128 * Fires when the tool is clicked
129 * @param {Ext.panel.Tool} this
130 * @param {Ext.EventObject} e The event object
164 if (me.id && Ext.Array.indexOf(types, me.id) > -1 && Ext.global.console) {
165 Ext.global.console.warn('When specifying a tool you should use the type option, the id can conflict now that tool is a Component');
169 me.type = me.type || me.id;
171 Ext.applyIf(me.renderData, {
173 blank: Ext.BLANK_IMAGE_URL,
177 me.addChildEls('toolEl');
179 // alias qtip, should use tooltip since it's what we have in the docs
180 me.tooltip = me.tooltip || me.qtip;
185 afterRender: function() {
189 me.callParent(arguments);
191 if (Ext.isObject(me.tooltip)) {
192 Ext.tip.QuickTipManager.register(Ext.apply({
197 attr = me.tooltipType == 'qtip' ? 'data-qtip' : 'title';
198 me.toolEl.dom.setAttribute(attr, me.tooltip);
204 mousedown: me.onMouseDown,
205 mouseover: me.onMouseOver,
206 mouseout: me.onMouseOut,
212 * Sets the type of the tool. Allows the icon to be changed.
213 * @param {String} type The new type. See the {@link #type} config.
214 * @return {Ext.panel.Tool} this
216 setType: function(type) {
221 me.toolEl.dom.className = me.baseCls + '-' + type;
227 * Binds this tool to a component.
229 * @param {Ext.Component} component The component
231 bindTo: function(component) {
232 this.owner = component;
236 * Called when the tool element is clicked
238 * @param {Ext.EventObject} e
239 * @param {HTMLElement} target The target element
241 onClick: function(e, target) {
248 owner = me.owner || me.ownerCt;
250 //remove the pressed + over class
251 me.el.removeCls(me.toolPressedCls);
252 me.el.removeCls(me.toolOverCls);
254 if (me.stopEvent !== false) {
258 Ext.callback(me.handler, me.scope || me, [e, target, owner, me]);
259 me.fireEvent('click', me, e);
264 onDestroy: function(){
265 if (Ext.isObject(this.tooltip)) {
266 Ext.tip.QuickTipManager.unregister(this.id);
272 * Called when the user presses their mouse button down on a tool
273 * Adds the press class ({@link #toolPressedCls})
276 onMouseDown: function() {
281 this.el.addCls(this.toolPressedCls);
285 * Called when the user rolls over a tool
286 * Adds the over class ({@link #toolOverCls})
289 onMouseOver: function() {
293 this.el.addCls(this.toolOverCls);
297 * Called when the user rolls out from a tool.
298 * Removes the over class ({@link #toolOverCls})
301 onMouseOut: function() {
302 this.el.removeCls(this.toolOverCls);