lixinru
/
YtIoT


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
							<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-panel-Tool'>/**
</span> * This class is used to display small visual icons in the header of a panel. There are a set of
 * 25 icons that can be specified by using the {@link #type} config. The {@link #handler} config
 * can be used to provide a function that will respond to any click events. In general, this class
 * will not be instantiated directly, rather it will be created by specifying the {@link Ext.panel.Panel#tools}
 * configuration on the Panel itself.
 *
 *     @example
 *     Ext.create('Ext.panel.Panel', {
 *         width: 200,
 *         height: 200,
 *         renderTo: document.body,
 *         title: 'A Panel',
 *         tools: [{
 *             type: 'help',
 *             handler: function(){
 *                 // show help here
 *             }
 *         }, {
 *             itemId: 'refresh',
 *             type: 'refresh',
 *             hidden: true,
 *             handler: function(){
 *                 // do refresh
 *             }
 *         }, {
 *             type: 'search',
 *             handler: function(event, target, owner, tool){
 *                 // do search
 *                 owner.child('#refresh').show();
 *             }
 *         }]
 *     });
 */
Ext.define('Ext.panel.Tool', {
    extend: 'Ext.Component',
    requires: ['Ext.tip.QuickTipManager'],
    alias: 'widget.tool',

    baseCls: Ext.baseCSSPrefix + 'tool',
    disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
    
<span id='Ext-panel-Tool-cfg-toolPressedCls'>    /**
</span>     * @cfg
     * @private
     */
    toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
<span id='Ext-panel-Tool-cfg-toolOverCls'>    /**
</span>     * @cfg
     * @private
     */
    toolOverCls: Ext.baseCSSPrefix + 'tool-over',

    ariaRole: 'button',

    childEls: [
        'toolEl'
    ],

    renderTpl: [
        '&lt;img id=&quot;{id}-toolEl&quot; src=&quot;{blank}&quot; class=&quot;{baseCls}-{type}&quot; role=&quot;presentation&quot;/&gt;'
    ],

<span id='Ext-panel-Tool-cfg-handler'>    /**
</span>     * @cfg {Function} handler
     * A function to execute when the tool is clicked. Arguments passed are:
     *
     * - **event** : Ext.EventObject - The click event.
     * - **toolEl** : Ext.Element - The tool Element.
     * - **owner** : Ext.panel.Header - The host panel header.
     * - **tool** : Ext.panel.Tool - The tool object
     */

<span id='Ext-panel-Tool-cfg-scope'>    /**
</span>     * @cfg {Object} scope
     * The scope to execute the {@link #handler} function. Defaults to the tool.
     */

<span id='Ext-panel-Tool-cfg-type'>    /**
</span>     * @cfg {String} type
     * The type of tool to render. The following types are available:
     *
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     * - &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
     */

<span id='Ext-panel-Tool-cfg-tooltip'>    /**
</span>     * @cfg {String/Object} tooltip
     * The tooltip for the tool - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config
     * object
     */

<span id='Ext-panel-Tool-cfg-tooltipType'>     /**
</span>     * @cfg {String} tooltipType
     * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
     */
    tooltipType: 'qtip',

<span id='Ext-panel-Tool-cfg-stopEvent'>    /**
</span>     * @cfg {Boolean} stopEvent
     * Specify as false to allow click event to propagate.
     */
    stopEvent: true,
    
    height: 15,
    width: 15,

    //&lt;debug&gt;
    _toolTypes: {
        close:1,
        collapse:1,
        down:1,
        expand:1,
        gear:1,
        help:1,
        left:1,
        maximize:1,
        minimize:1,
        minus:1,
        //move:1,
        next:1,
        pin:1,
        plus:1,
        prev:1,
        print:1,
        refresh:1,
        //resize:1,
        restore:1,
        right:1,
        save:1,
        search:1,
        toggle:1,
        unpin:1,
        up:1
    },
    //&lt;/debug&gt;

    initComponent: function() {
        var me = this;
        me.addEvents(
<span id='Ext-panel-Tool-event-click'>            /**
</span>             * @event click
             * Fires when the tool is clicked
             * @param {Ext.panel.Tool} this
             * @param {Ext.EventObject} e The event object
             */
            'click'
        );

        //&lt;debug&gt;
        if (me.id &amp;&amp; me._toolTypes[me.id] &amp;&amp; Ext.global.console) {
            Ext.global.console.warn('When specifying a tool you should use the type option, the id can conflict now that tool is a Component');
        }
        //&lt;/debug&gt;

        me.type = me.type || me.id;

        Ext.applyIf(me.renderData, {
            baseCls: me.baseCls,
            blank: Ext.BLANK_IMAGE_URL,
            type: me.type
        });

        // alias qtip, should use tooltip since it's what we have in the docs
        me.tooltip = me.tooltip || me.qtip;
        me.callParent();
        me.on({
            element: 'toolEl',
            click: me.onClick,
            mousedown: me.onMouseDown,
            mouseover: me.onMouseOver,
            mouseout: me.onMouseOut,
            scope: me
        });
    },

    // inherit docs
    afterRender: function() {
        var me = this,
            attr;

        me.callParent(arguments);
        if (me.tooltip) {
            if (Ext.isObject(me.tooltip)) {
                Ext.tip.QuickTipManager.register(Ext.apply({
                    target: me.id
                }, me.tooltip));
            }
            else {
                attr = me.tooltipType == 'qtip' ? 'data-qtip' : 'title';
                me.toolEl.dom.setAttribute(attr, me.tooltip);
            }
        }
    },

    getFocusEl: function() {
        return this.el;
    },

<span id='Ext-panel-Tool-method-setType'>    /**
</span>     * Sets the type of the tool. Allows the icon to be changed.
     * @param {String} type The new type. See the {@link #type} config.
     * @return {Ext.panel.Tool} this
     */
    setType: function(type) {
        var me = this;

        me.type = type;
        if (me.rendered) {
            me.toolEl.dom.className = me.baseCls + '-' + type;
        }
        return me;
    },

<span id='Ext-panel-Tool-method-bindTo'>    /**
</span>     * Binds this tool to a component.
     * @private
     * @param {Ext.Component} component The component
     */
    bindTo: function(component) {
        this.owner = component;
    },

<span id='Ext-panel-Tool-method-onClick'>    /**
</span>     * Called when the tool element is clicked
     * @private
     * @param {Ext.EventObject} e
     * @param {HTMLElement} target The target element
     */
    onClick: function(e, target) {
        var me = this,
            owner;

        if (me.disabled) {
            return false;
        }
        owner = me.owner || me.ownerCt;

        //remove the pressed + over class
        me.el.removeCls(me.toolPressedCls);
        me.el.removeCls(me.toolOverCls);

        if (me.stopEvent !== false) {
            e.stopEvent();
        }

        Ext.callback(me.handler, me.scope || me, [e, target, owner, me]);
        me.fireEvent('click', me, e);
        return true;
    },

    // inherit docs
    onDestroy: function(){
        if (Ext.isObject(this.tooltip)) {
            Ext.tip.QuickTipManager.unregister(this.id);
        }
        this.callParent();
    },

<span id='Ext-panel-Tool-method-onMouseDown'>    /**
</span>     * Called when the user presses their mouse button down on a tool
     * Adds the press class ({@link #toolPressedCls})
     * @private
     */
    onMouseDown: function() {
        if (this.disabled) {
            return false;
        }

        this.el.addCls(this.toolPressedCls);
    },

<span id='Ext-panel-Tool-method-onMouseOver'>    /**
</span>     * Called when the user rolls over a tool
     * Adds the over class ({@link #toolOverCls})
     * @private
     */
    onMouseOver: function() {
        if (this.disabled) {
            return false;
        }
        this.el.addCls(this.toolOverCls);
    },

<span id='Ext-panel-Tool-method-onMouseOut'>    /**
</span>     * Called when the user rolls out from a tool.
     * Removes the over class ({@link #toolOverCls})
     * @private
     */
    onMouseOut: function() {
        this.el.removeCls(this.toolOverCls);
    }
});
</pre>
</body>
</html>