/**
* @class Ext.panel.Tool
* @extends Ext.Component
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 Usage__
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();
}
}]
});
* @markdown
* @xtype tool
*/
Ext.define('Ext.panel.Tool', {
extend: 'Ext.Component',
requires: ['Ext.tip.QuickTipManager'],
alias: 'widget.tool',
baseCls: Ext.baseCSSPrefix + 'tool',
disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
toolOverCls: Ext.baseCSSPrefix + 'tool-over',
ariaRole: 'button',
renderTpl: ['<img src="{blank}" class="{baseCls}-{type}" role="presentation"/>'],
/**
* @cfg {Function} handler
* A function to execute when the tool is clicked.
* Arguments passed are:
* <ul>
* <li><b>event</b> : Ext.EventObject<div class="sub-desc">The click event.</div></li>
* <li><b>toolEl</b> : Ext.core.Element<div class="sub-desc">The tool Element.</div></li>
* <li><b>panel</b> : Ext.panel.Panel<div class="sub-desc">The host Panel</div></li>
* <li><b>tool</b> : Ext.panel.Tool<div class="sub-desc">The tool object</div></li>
* </ul>
*/
/**
* @cfg {Object} scope
* The scope to execute the {@link #handler} function. Defaults to the tool.
*/
/**
* @cfg {String} type
* The type of tool to render. The following types are available:
* <ul>
* <li>close</li>
* <li>collapse</li>
* <li>down</li>
* <li>expand</li>
* <li>gear</li>
* <li>help</li>
* <li>left</li>
* <li>maximize</li>
* <li>minimize</li>
* <li>minus</li>
* <li>move</li>
* <li>next</li>
* <li>pin</li>
* <li>plus</li>
* <li>prev</li>
* <li>print</li>
* <li>refresh</li>
* <li>resize</li>
* <li>restore</li>
* <li>right</li>
* <li>save</li>
* <li>search</li>
* <li>toggle</li>
* <li>unpin</li>
* <li>up</li>
* </ul>
*/
/**
* @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
*/
/**
* @cfg {Boolean} stopEvent
* Defaults to true. Specify as false to allow click event to propagate.
*/
stopEvent: true,
initComponent: function() {
var me = this;
me.addEvents(
/**
* @event click
* Fires when the tool is clicked
* @param {Ext.panel.Tool} this
* @param {Ext.EventObject} e The event object
*/
'click'
);
//<debug>
var types = [
'close',
'collapse',
'down',
'expand',
'gear',
'help',
'left',
'maximize',
'minimize',
'minus',
'move',
'next',
'pin',
'plus',
'prev',
'print',
'refresh',
'resize',
'restore',
'right',
'save',
'search',
'toggle',
'unpin',
'up'
];
if (me.id && Ext.Array.indexOf(types, me.id) > -1) {
Ext.global.console.warn('When specifying a tool you should use the type option, the id can conflict now that tool is a Component');
}
//</debug>
me.type = me.type || me.id;
Ext.applyIf(me.renderData, {
baseCls: me.baseCls,
blank: Ext.BLANK_IMAGE_URL,
type: me.type
});
me.renderSelectors.toolEl = '.' + me.baseCls + '-' + me.type;
me.callParent();
},
// inherit docs
afterRender: function() {
var me = this;
me.callParent(arguments);
if (me.qtip) {
if (Ext.isObject(me.qtip)) {
Ext.tip.QuickTipManager.register(Ext.apply({
target: me.id
}, me.qtip));
}
else {
me.toolEl.dom.qtip = me.qtip;
}
}
me.mon(me.toolEl, {
click: me.onClick,
mousedown: me.onMouseDown,
mouseover: me.onMouseOver,
mouseout: me.onMouseOut,
scope: me
});
},
/**
* Set 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;
},
/**
* Binds this tool to a component.
* @private
* @param {Ext.Component} component The component
*/
bindTo: function(component) {
this.owner = component;
},
/**
* Fired 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();
},
/**
* Called then the user pressing 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);
},
/**
* 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);
}
});