    /** * 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#tools} * configuration on the Panel itself. * *     @example *     Ext.create('Ext.Panel', { *         title: 'A Panel', *         fullscreen: true, * *         tools: [{ *             type: 'help', *             handler: function() { *                 // show help here *             } *         }, { *             itemId: 'refresh', *             type: 'refresh', *             hidden: true, *             handler: function () { *                 // do refresh *             } *         }, { *             type: 'search', *             handler: function (panel) { *                 // do search *                 panel.down('#refresh').show(); *             } *         }] *     }); * * @since 6.0.1 */Ext.define('Ext.panel.Tool', {    extend: 'Ext.Component',    xtype: ['paneltool', 'tool'],     //uses: ['Ext.tip.QuickTipManager'],      /**     * @property {Boolean} isPanelTool      * `true` in this class to identify an object as an instantiated Tool, or subclass thereof.     * @readonly     */    isPanelTool: true,     baseCls: Ext.baseCSSPrefix + 'tool',    disabledCls: Ext.baseCSSPrefix + 'tool-disabled',    toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',    toolOverCls: Ext.baseCSSPrefix + 'tool-over',     element: {        reference: 'element',        listeners: {            click: 'onClick',            mousedown: 'onMouseDown',            mouseover: 'onMouseOver',            mouseout: 'onMouseOut'        },         children: [{            reference: 'toolElement'        }]    },     /**     * @cfg {Function/String} handler     * A function to execute when the tool is clicked.     *     * @cfg {Ext.Component} handler.owner The logical owner of the tool. In a typical usage     * this will be an `Ext.Panel` (as specified by the `toolOwner` config).     * @cfg {Ext.panel.Tool} handler.tool The tool that is calling.     * @cfg {Ext.event.Event} handler.event The click event.     * @controllable     */    handler: null,     /**     * @cfg {Object} scope      * The scope to execute the {@link #handler} function. Defaults to the tool.     */    scope: null,     /**     * @cfg {Ext.Component} toolOwner     * The owner to report to the `handler` method. Default is `null` for the `parent`.     * This is automatically set to the owning `Ext.Panel` when a tool is created as a     * member of a panel's `tools`.     */    toolOwner: null,     config: {        /**         * @cfg {String} iconCls          * An alternative to the standard list of {@link #type types}.         */        iconCls: null,         /**         * @cfg {String} type          * The type of tool to render. The following types are available:         *         * ##Neptune Theme         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> close         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> minimize         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> maximize         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> restore         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> toggle         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> gear         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> prev         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> next         * - <img style="vertical-align:sub;margin-right:4px;" width="10" height="16" title="" alt="" src="data:image/gif;base64, " /> pin         * - <img style="vertical-align:sub;margin-right:4px;" width="10" height="16" title="" alt="" src="data:image/gif;base64, " /> unpin         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> right         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> left         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> down         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> up         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> refresh         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> plus         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> minus         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> search         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="13" title="" alt="" src="data:image/gif;base64, " /> save         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> help         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="14" title="" alt="" src="data:image/gif;base64, " /> print         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="16" title="" alt="" src="data:image/gif;base64, " /> expand         * - <img style="vertical-align:sub;margin-right:4px;" width="16" height="14" title="" alt="" src="data:image/gif;base64, " /> collapse         */        type: null    },     /**     * @cfg {Boolean} stopEvent      * Specify as false to allow click event to propagate.     */    stopEvent: true,        //ariaRole: 'button',     //focusable: true,     //tabIndex: 0,     //     //keyHandlers: {     //    SPACE: 'onClick',     //    ENTER: 'onClick'     //},      weight: 10,     updateIconCls: function (iconCls, oldValue) {        var toolEl = this.toolElement;         toolEl.replaceCls(oldValue, iconCls);    },     updateType: function (type, oldType) {        var baseCls = this.getBaseCls(),            toolEl = this.toolElement;         toolEl.replaceCls(oldType && (baseCls + '-' + oldType),                          type && (baseCls + '-' + type));    },     privates: {        //<debug>         _toolTypes: {            close:1,            collapse:1,            down:1,            expand:1,            gear:1,            help:1,            left:1,            maximize:1,            minimize:1,            minus:1,            menu: 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        },        //</debug>          /**         * Called when the tool element is clicked         * @private         * @param {Ext.event.Event} e         * @param {HTMLElement} target The target element         */        onClick: function(e, target) {            var me = this,                handler = me.handler || me.callback; // Pick up callback for classic compat              if (me.disabled) {                return false;            }             //remove the pressed + over class if it was a pointer event             if (e.type !== 'keydown') {                me.el.removeCls(me.toolPressedCls + ' ' + me.toolOverCls);            }             if (me.stopEvent !== false) {                e.stopEvent();            }                        if (handler) {                Ext.callback(handler, me.scope, [me.toolOwner || me.parent, me, e], 0, me);            }             /**             * @event click             * Fires when the tool is clicked             * @param {Ext.panel.Tool} this             * @param {Ext.event.Event} e The event object             * @param {Ext.Component} owner The logical owner of the tool. In a typical             * `Ext.panel.Panel`, this is set to the owning panel. This value comes from the             * `toolOwner` config.             * @since 5.0.0             */            me.fireEvent('click', me, e, me.toolOwner || me.ownerCt);             return true;        },         /**         * Called when the user presses their mouse button down on a tool         * Adds the press class ({@link #toolPressedCls})         * @private         */        onMouseDown: function(e) {            // We prevent default action on mousedown to avoid focusing the tool.             // This is consistent with tool behavior in versions prior to 5.5 where             // tools were pointer-interactive only.             e.preventDefault();                        if (this.disabled) {                return false;            }             this.el.addCls(this.toolPressedCls);        },         /**         * 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);        },         /**         * Called when the user rolls out from a tool.         * Removes the over class ({@link #toolOverCls})         * @private         */        onMouseOut: function() {            this.el.removeCls(this.toolOverCls);        }    }});