docs/source/Tool.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-panel-Tool'>/**
  19 </span> * This class is used to display small visual icons in the header of a panel. There are a set of
  20  * 25 icons that can be specified by using the {@link #type} config. The {@link #handler} config
  21  * can be used to provide a function that will respond to any click events. In general, this class
  22  * will not be instantiated directly, rather it will be created by specifying the {@link Ext.panel.Panel#tools}
  23  * configuration on the Panel itself.
  24  *
  25  *     @example
  26  *     Ext.create('Ext.panel.Panel', {
  27  *         width: 200,
  28  *         height: 200,
  29  *         renderTo: document.body,
  30  *         title: 'A Panel',
  31  *         tools: [{
  32  *             type: 'help',
  33  *             handler: function(){
  34  *                 // show help here
  35  *             }
  36  *         }, {
  37  *             itemId: 'refresh',
  38  *             type: 'refresh',
  39  *             hidden: true,
  40  *             handler: function(){
  41  *                 // do refresh
  42  *             }
  43  *         }, {
  44  *             type: 'search',
  45  *             handler: function(event, target, owner, tool){
  46  *                 // do search
  47  *                 owner.child('#refresh').show();
  48  *             }
  49  *         }]
  50  *     });
  51  */
  52 Ext.define('Ext.panel.Tool', {
  53     extend: 'Ext.Component',
  54     requires: ['Ext.tip.QuickTipManager'],
  55     alias: 'widget.tool',
  56
  57     baseCls: Ext.baseCSSPrefix + 'tool',
  58     disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
  59     toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
  60     toolOverCls: Ext.baseCSSPrefix + 'tool-over',
  61     ariaRole: 'button',
  62     renderTpl: ['&lt;img id=&quot;{id}-toolEl&quot; src=&quot;{blank}&quot; class=&quot;{baseCls}-{type}&quot; role=&quot;presentation&quot;/&gt;'],
  63
  64 <span id='Ext-panel-Tool-cfg-handler'>    /**
  65 </span>     * @cfg {Function} handler
  66      * A function to execute when the tool is clicked. Arguments passed are:
  67      *
  68      * - **event** : Ext.EventObject - The click event.
  69      * - **toolEl** : Ext.Element - The tool Element.
  70      * - **owner** : Ext.panel.Header - The host panel header.
  71      * - **tool** : Ext.panel.Tool - The tool object
  72      */
  73
  74 <span id='Ext-panel-Tool-cfg-scope'>    /**
  75 </span>     * @cfg {Object} scope
  76      * The scope to execute the {@link #handler} function. Defaults to the tool.
  77      */
  78
  79 <span id='Ext-panel-Tool-cfg-type'>    /**
  80 </span>     * @cfg {String} type
  81      * The type of tool to render. The following types are available:
  82      *
  83      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-close&quot;&gt;&lt;/span&gt; close
  84      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-minimize&quot;&gt;&lt;/span&gt; minimize
  85      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-maximize&quot;&gt;&lt;/span&gt; maximize
  86      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-restore&quot;&gt;&lt;/span&gt; restore
  87      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-toggle&quot;&gt;&lt;/span&gt; toggle
  88      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-gear&quot;&gt;&lt;/span&gt; gear
  89      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-prev&quot;&gt;&lt;/span&gt; prev
  90      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-next&quot;&gt;&lt;/span&gt; next
  91      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-pin&quot;&gt;&lt;/span&gt; pin
  92      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-unpin&quot;&gt;&lt;/span&gt; unpin
  93      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-right&quot;&gt;&lt;/span&gt; right
  94      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-left&quot;&gt;&lt;/span&gt; left
  95      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-down&quot;&gt;&lt;/span&gt; down
  96      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-up&quot;&gt;&lt;/span&gt; up
  97      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-refresh&quot;&gt;&lt;/span&gt; refresh
  98      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-plus&quot;&gt;&lt;/span&gt; plus
  99      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-minus&quot;&gt;&lt;/span&gt; minus
 100      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-search&quot;&gt;&lt;/span&gt; search
 101      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-save&quot;&gt;&lt;/span&gt; save
 102      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-help&quot;&gt;&lt;/span&gt; help
 103      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-print&quot;&gt;&lt;/span&gt; print
 104      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-expand&quot;&gt;&lt;/span&gt; expand
 105      * - &lt;span class=&quot;x-tool&quot;&gt;&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==&quot; class=&quot;x-tool-collapse&quot;&gt;&lt;/span&gt; collapse
 106      */
 107
 108 <span id='Ext-panel-Tool-cfg-tooltip'>    /**
 109 </span>     * @cfg {String/Object} tooltip
 110      * The tooltip for the tool - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config
 111      * object
 112      */
 113
 114 <span id='Ext-panel-Tool-cfg-tooltipType'>     /**
 115 </span>     * @cfg {String} tooltipType
 116      * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
 117      */
 118     tooltipType: 'qtip',
 119
 120 <span id='Ext-panel-Tool-cfg-stopEvent'>    /**
 121 </span>     * @cfg {Boolean} stopEvent
 122      * Specify as false to allow click event to propagate.
 123      */
 124     stopEvent: true,
 125
 126     initComponent: function() {
 127         var me = this;
 128         me.addEvents(
 129 <span id='Ext-panel-Tool-event-click'>            /**
 130 </span>             * @event click
 131              * Fires when the tool is clicked
 132              * @param {Ext.panel.Tool} this
 133              * @param {Ext.EventObject} e The event object
 134              */
 135             'click'
 136         );
 137
 138         //&lt;debug&gt;
 139         var types = [
 140             'close',
 141             'collapse',
 142             'down',
 143             'expand',
 144             'gear',
 145             'help',
 146             'left',
 147             'maximize',
 148             'minimize',
 149             'minus',
 150             'move',
 151             'next',
 152             'pin',
 153             'plus',
 154             'prev',
 155             'print',
 156             'refresh',
 157             'resize',
 158             'restore',
 159             'right',
 160             'save',
 161             'search',
 162             'toggle',
 163             'unpin',
 164             'up'
 165         ];
 166
 167         if (me.id &amp;&amp; Ext.Array.indexOf(types, me.id) &gt; -1 &amp;&amp; Ext.global.console) {
 168             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         }
 170         //&lt;/debug&gt;
 171
 172         me.type = me.type || me.id;
 173
 174         Ext.applyIf(me.renderData, {
 175             baseCls: me.baseCls,
 176             blank: Ext.BLANK_IMAGE_URL,
 177             type: me.type
 178         });
 179
 180         me.addChildEls('toolEl');
 181
 182         // alias qtip, should use tooltip since it's what we have in the docs
 183         me.tooltip = me.tooltip || me.qtip;
 184         me.callParent();
 185     },
 186
 187     // inherit docs
 188     afterRender: function() {
 189         var me = this,
 190             attr;
 191
 192         me.callParent(arguments);
 193         if (me.tooltip) {
 194             if (Ext.isObject(me.tooltip)) {
 195                 Ext.tip.QuickTipManager.register(Ext.apply({
 196                     target: me.id
 197                 }, me.tooltip));
 198             }
 199             else {
 200                 attr = me.tooltipType == 'qtip' ? 'data-qtip' : 'title';
 201                 me.toolEl.dom.setAttribute(attr, me.tooltip);
 202             }
 203         }
 204
 205         me.mon(me.toolEl, {
 206             click: me.onClick,
 207             mousedown: me.onMouseDown,
 208             mouseover: me.onMouseOver,
 209             mouseout: me.onMouseOut,
 210             scope: me
 211         });
 212     },
 213
 214 <span id='Ext-panel-Tool-method-setType'>    /**
 215 </span>     * Sets the type of the tool. Allows the icon to be changed.
 216      * @param {String} type The new type. See the {@link #type} config.
 217      * @return {Ext.panel.Tool} this
 218      */
 219     setType: function(type) {
 220         var me = this;
 221
 222         me.type = type;
 223         if (me.rendered) {
 224             me.toolEl.dom.className = me.baseCls + '-' + type;
 225         }
 226         return me;
 227     },
 228
 229 <span id='Ext-panel-Tool-method-bindTo'>    /**
 230 </span>     * Binds this tool to a component.
 231      * @private
 232      * @param {Ext.Component} component The component
 233      */
 234     bindTo: function(component) {
 235         this.owner = component;
 236     },
 237
 238 <span id='Ext-panel-Tool-method-onClick'>    /**
 239 </span>     * Called when the tool element is clicked
 240      * @private
 241      * @param {Ext.EventObject} e
 242      * @param {HTMLElement} target The target element
 243      */
 244     onClick: function(e, target) {
 245         var me = this,
 246             owner;
 247
 248         if (me.disabled) {
 249             return false;
 250         }
 251         owner = me.owner || me.ownerCt;
 252
 253         //remove the pressed + over class
 254         me.el.removeCls(me.toolPressedCls);
 255         me.el.removeCls(me.toolOverCls);
 256
 257         if (me.stopEvent !== false) {
 258             e.stopEvent();
 259         }
 260
 261         Ext.callback(me.handler, me.scope || me, [e, target, owner, me]);
 262         me.fireEvent('click', me, e);
 263         return true;
 264     },
 265
 266     // inherit docs
 267     onDestroy: function(){
 268         if (Ext.isObject(this.tooltip)) {
 269             Ext.tip.QuickTipManager.unregister(this.id);
 270         }
 271         this.callParent();
 272     },
 273
 274 <span id='Ext-panel-Tool-method-onMouseDown'>    /**
 275 </span>     * Called when the user presses their mouse button down on a tool
 276      * Adds the press class ({@link #toolPressedCls})
 277      * @private
 278      */
 279     onMouseDown: function() {
 280         if (this.disabled) {
 281             return false;
 282         }
 283
 284         this.el.addCls(this.toolPressedCls);
 285     },
 286
 287 <span id='Ext-panel-Tool-method-onMouseOver'>    /**
 288 </span>     * Called when the user rolls over a tool
 289      * Adds the over class ({@link #toolOverCls})
 290      * @private
 291      */
 292     onMouseOver: function() {
 293         if (this.disabled) {
 294             return false;
 295         }
 296         this.el.addCls(this.toolOverCls);
 297     },
 298
 299 <span id='Ext-panel-Tool-method-onMouseOut'>    /**
 300 </span>     * Called when the user rolls out from a tool.
 301      * Removes the over class ({@link #toolOverCls})
 302      * @private
 303      */
 304     onMouseOut: function() {
 305         this.el.removeCls(this.toolOverCls);
 306     }
 307 });</pre>
 308 </body>
 309 </html>