docs/source/Tool.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-panel.Tool'>/**
   2 </span> * @class Ext.panel.Tool
   3  * @extends Ext.Component
   4
   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.
  10
  11 __Example Usage__
  12
  13     Ext.create('Ext.panel.Panel', {
  14        width: 200,
  15        height: 200,
  16        renderTo: document.body,
  17        title: 'A Panel',
  18        tools: [{
  19            type: 'help',
  20            handler: function(){
  21                // show help here
  22            }
  23        }, {
  24            itemId: 'refresh',
  25            type: 'refresh',
  26            hidden: true,
  27            handler: function(){
  28                // do refresh
  29            }
  30        }, {
  31            type: 'search',
  32            handler: function(event, target, owner, tool){
  33                // do search
  34                owner.child('#refresh').show();
  35            }
  36        }]
  37     });
  38
  39  * @markdown
  40  * @xtype tool
  41  */
  42 Ext.define('Ext.panel.Tool', {
  43     extend: 'Ext.Component',
  44     requires: ['Ext.tip.QuickTipManager'],
  45     alias: 'widget.tool',
  46
  47     baseCls: Ext.baseCSSPrefix + 'tool',
  48     disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
  49     toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
  50     toolOverCls: Ext.baseCSSPrefix + 'tool-over',
  51     ariaRole: 'button',
  52     renderTpl: ['&lt;img src=&quot;{blank}&quot; class=&quot;{baseCls}-{type}&quot; role=&quot;presentation&quot;/&gt;'],
  53
  54 <span id='Ext-panel.Tool-cfg-handler'>    /**
  55 </span>     * @cfg {Function} handler
  56      * A function to execute when the tool is clicked.
  57      * Arguments passed are:
  58      * &lt;ul&gt;
  59      * &lt;li&gt;&lt;b&gt;event&lt;/b&gt; : Ext.EventObject&lt;div class=&quot;sub-desc&quot;&gt;The click event.&lt;/div&gt;&lt;/li&gt;
  60      * &lt;li&gt;&lt;b&gt;toolEl&lt;/b&gt; : Ext.core.Element&lt;div class=&quot;sub-desc&quot;&gt;The tool Element.&lt;/div&gt;&lt;/li&gt;
  61      * &lt;li&gt;&lt;b&gt;panel&lt;/b&gt; : Ext.panel.Panel&lt;div class=&quot;sub-desc&quot;&gt;The host Panel&lt;/div&gt;&lt;/li&gt;
  62      * &lt;li&gt;&lt;b&gt;tool&lt;/b&gt; : Ext.panel.Tool&lt;div class=&quot;sub-desc&quot;&gt;The tool object&lt;/div&gt;&lt;/li&gt;
  63      * &lt;/ul&gt;
  64      */
  65
  66 <span id='Ext-panel.Tool-cfg-scope'>    /**
  67 </span>     * @cfg {Object} scope
  68      * The scope to execute the {@link #handler} function. Defaults to the tool.
  69      */
  70
  71 <span id='Ext-panel.Tool-cfg-type'>    /**
  72 </span>     * @cfg {String} type
  73      * The type of tool to render. The following types are available:
  74      * &lt;ul&gt;
  75      * &lt;li&gt;close&lt;/li&gt;
  76      * &lt;li&gt;collapse&lt;/li&gt;
  77      * &lt;li&gt;down&lt;/li&gt;
  78      * &lt;li&gt;expand&lt;/li&gt;
  79      * &lt;li&gt;gear&lt;/li&gt;
  80      * &lt;li&gt;help&lt;/li&gt;
  81      * &lt;li&gt;left&lt;/li&gt;
  82      * &lt;li&gt;maximize&lt;/li&gt;
  83      * &lt;li&gt;minimize&lt;/li&gt;
  84      * &lt;li&gt;minus&lt;/li&gt;
  85      * &lt;li&gt;move&lt;/li&gt;
  86      * &lt;li&gt;next&lt;/li&gt;
  87      * &lt;li&gt;pin&lt;/li&gt;
  88      * &lt;li&gt;plus&lt;/li&gt;
  89      * &lt;li&gt;prev&lt;/li&gt;
  90      * &lt;li&gt;print&lt;/li&gt;
  91      * &lt;li&gt;refresh&lt;/li&gt;
  92      * &lt;li&gt;resize&lt;/li&gt;
  93      * &lt;li&gt;restore&lt;/li&gt;
  94      * &lt;li&gt;right&lt;/li&gt;
  95      * &lt;li&gt;save&lt;/li&gt;
  96      * &lt;li&gt;search&lt;/li&gt;
  97      * &lt;li&gt;toggle&lt;/li&gt;
  98      * &lt;li&gt;unpin&lt;/li&gt;
  99      * &lt;li&gt;up&lt;/li&gt;
 100      * &lt;/ul&gt;
 101      */
 102
 103 <span id='Ext-panel.Tool-cfg-tooltip'>    /**
 104 </span>     * @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
 106      */
 107
 108 <span id='Ext-panel.Tool-cfg-stopEvent'>    /**
 109 </span>     * @cfg {Boolean} stopEvent
 110      * Defaults to true. Specify as false to allow click event to propagate.
 111      */
 112     stopEvent: true,
 113
 114     initComponent: function() {
 115         var me = this;
 116         me.addEvents(
 117 <span id='Ext-panel.Tool-event-click'>            /**
 118 </span>             * @event click
 119              * Fires when the tool is clicked
 120              * @param {Ext.panel.Tool} this
 121              * @param {Ext.EventObject} e The event object
 122              */
 123             'click'
 124         );
 125
 126         //&lt;debug&gt;
 127         var types = [
 128             'close',
 129             'collapse',
 130             'down',
 131             'expand',
 132             'gear',
 133             'help',
 134             'left',
 135             'maximize',
 136             'minimize',
 137             'minus',
 138             'move',
 139             'next',
 140             'pin',
 141             'plus',
 142             'prev',
 143             'print',
 144             'refresh',
 145             'resize',
 146             'restore',
 147             'right',
 148             'save',
 149             'search',
 150             'toggle',
 151             'unpin',
 152             'up'
 153         ];
 154
 155         if (me.id &amp;&amp; Ext.Array.indexOf(types, me.id) &gt; -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');
 157         }
 158         //&lt;/debug&gt;
 159
 160         me.type = me.type || me.id;
 161
 162         Ext.applyIf(me.renderData, {
 163             baseCls: me.baseCls,
 164             blank: Ext.BLANK_IMAGE_URL,
 165             type: me.type
 166         });
 167         me.renderSelectors.toolEl = '.' + me.baseCls + '-' + me.type;
 168         me.callParent();
 169     },
 170
 171     // inherit docs
 172     afterRender: function() {
 173         var me = this;
 174         me.callParent(arguments);
 175         if (me.qtip) {
 176             if (Ext.isObject(me.qtip)) {
 177                 Ext.tip.QuickTipManager.register(Ext.apply({
 178                     target: me.id
 179                 }, me.qtip));
 180             }
 181             else {
 182                 me.toolEl.dom.qtip = me.qtip;
 183             }
 184         }
 185
 186         me.mon(me.toolEl, {
 187             click: me.onClick,
 188             mousedown: me.onMouseDown,
 189             mouseover: me.onMouseOver,
 190             mouseout: me.onMouseOut,
 191             scope: me
 192         });
 193     },
 194
 195 <span id='Ext-panel.Tool-method-setType'>    /**
 196 </span>     * 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
 199      */
 200     setType: function(type) {
 201         var me = this;
 202
 203         me.type = type;
 204         if (me.rendered) {
 205             me.toolEl.dom.className = me.baseCls + '-' + type;
 206         }
 207         return me;
 208     },
 209
 210 <span id='Ext-panel.Tool-method-bindTo'>    /**
 211 </span>     * Binds this tool to a component.
 212      * @private
 213      * @param {Ext.Component} component The component
 214      */
 215     bindTo: function(component) {
 216         this.owner = component;
 217     },
 218
 219 <span id='Ext-panel.Tool-method-onClick'>    /**
 220 </span>     * Fired when the tool element is clicked
 221      * @private
 222      * @param {Ext.EventObject} e
 223      * @param {HTMLElement} target The target element
 224      */
 225     onClick: function(e, target) {
 226         var me = this,
 227             owner;
 228
 229         if (me.disabled) {
 230             return false;
 231         }
 232         owner = me.owner || me.ownerCt;
 233
 234         //remove the pressed + over class
 235         me.el.removeCls(me.toolPressedCls);
 236         me.el.removeCls(me.toolOverCls);
 237
 238         if (me.stopEvent !== false) {
 239             e.stopEvent();
 240         }
 241
 242         Ext.callback(me.handler, me.scope || me, [e, target, owner, me]);
 243         me.fireEvent('click', me, e);
 244         return true;
 245     },
 246
 247     // inherit docs
 248     onDestroy: function(){
 249         if (Ext.isObject(this.tooltip)) {
 250             Ext.tip.QuickTipManager.unregister(this.id);
 251         }
 252         this.callParent();
 253     },
 254
 255 <span id='Ext-panel.Tool-method-onMouseDown'>    /**
 256 </span>     * Called then the user pressing their mouse button down on a tool
 257      * Adds the press class ({@link #toolPressedCls})
 258      * @private
 259      */
 260     onMouseDown: function() {
 261         if (this.disabled) {
 262             return false;
 263         }
 264
 265         this.el.addCls(this.toolPressedCls);
 266     },
 267
 268 <span id='Ext-panel.Tool-method-onMouseOver'>    /**
 269 </span>     * Called when the user rolls over a tool
 270      * Adds the over class ({@link #toolOverCls})
 271      * @private
 272      */
 273     onMouseOver: function() {
 274         if (this.disabled) {
 275             return false;
 276         }
 277         this.el.addCls(this.toolOverCls);
 278     },
 279
 280 <span id='Ext-panel.Tool-method-onMouseOut'>    /**
 281 </span>     * Called when the user rolls out from a tool.
 282      * Removes the over class ({@link #toolOverCls})
 283      * @private
 284      */
 285     onMouseOut: function() {
 286         this.el.removeCls(this.toolOverCls);
 287     }
 288 });</pre></pre></body></html>