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