/**
- * @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
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * 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',
@@ -49,72 +59,74 @@ Ext.define('Ext.panel.Tool', {
toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
toolOverCls: Ext.baseCSSPrefix + 'tool-over',
ariaRole: 'button',
- renderTpl: ['<img src="{blank}" class="{baseCls}-{type}" role="presentation"/>'],
-
- /**
+ renderTpl: ['<img id="{id}-toolEl" 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>
+ * 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
*/
-
- /**
+
+ /**
* @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>
+ *
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-close"></span> close
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-minimize"></span> minimize
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-maximize"></span> maximize
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-restore"></span> restore
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-toggle"></span> toggle
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-gear"></span> gear
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-prev"></span> prev
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-next"></span> next
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-pin"></span> pin
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-unpin"></span> unpin
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-right"></span> right
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-left"></span> left
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-down"></span> down
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-up"></span> up
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-refresh"></span> refresh
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-plus"></span> plus
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-minus"></span> minus
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-search"></span> search
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-save"></span> save
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-help"></span> help
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-print"></span> print
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-expand"></span> expand
+ * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-collapse"></span> collapse
+ */
+
+ /**
+ * @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 {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 {String} tooltipType
+ * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
*/
-
- /**
+ tooltipType: 'qtip',
+
+ /**
* @cfg {Boolean} stopEvent
- * Defaults to true. Specify as false to allow click event to propagate.
+ * 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
@@ -122,41 +134,41 @@ Ext.define('Ext.panel.Tool', {
*/
'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',
+ 'close',
+ 'collapse',
+ 'down',
+ 'expand',
+ 'gear',
+ 'help',
+ 'left',
+ 'maximize',
+ 'minimize',
+ 'minus',
+ 'move',
+ 'next',
+ 'pin',
+ 'plus',
+ 'prev',
+ 'print',
+ 'refresh',
+ 'resize',
+ 'restore',
+ 'right',
+ 'save',
+ 'search',
'toggle',
- 'unpin',
+ 'unpin',
'up'
];
-
- if (me.id && Ext.Array.indexOf(types, me.id) > -1) {
+
+ if (me.id && Ext.Array.indexOf(types, me.id) > -1 && 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');
}
//</debug>
-
+
me.type = me.type || me.id;
Ext.applyIf(me.renderData, {
@@ -164,22 +176,29 @@ Ext.define('Ext.panel.Tool', {
blank: Ext.BLANK_IMAGE_URL,
type: me.type
});
- me.renderSelectors.toolEl = '.' + me.baseCls + '-' + me.type;
+
+ me.addChildEls('toolEl');
+
+ // alias qtip, should use tooltip since it's what we have in the docs
+ me.tooltip = me.tooltip || me.qtip;
me.callParent();
},
// inherit docs
afterRender: function() {
- var me = this;
+ var me = this,
+ attr;
+
me.callParent(arguments);
- if (me.qtip) {
- if (Ext.isObject(me.qtip)) {
+ if (me.tooltip) {
+ if (Ext.isObject(me.tooltip)) {
Ext.tip.QuickTipManager.register(Ext.apply({
target: me.id
- }, me.qtip));
+ }, me.tooltip));
}
else {
- me.toolEl.dom.qtip = me.qtip;
+ attr = me.tooltipType == 'qtip' ? 'data-qtip' : 'title';
+ me.toolEl.dom.setAttribute(attr, me.tooltip);
}
}
@@ -192,14 +211,14 @@ Ext.define('Ext.panel.Tool', {
});
},
- /**
- * Set the type of the tool. Allows the icon to be changed.
+ /**
+ * 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;
@@ -207,7 +226,7 @@ Ext.define('Ext.panel.Tool', {
return me;
},
- /**
+ /**
* Binds this tool to a component.
* @private
* @param {Ext.Component} component The component
@@ -216,8 +235,8 @@ Ext.define('Ext.panel.Tool', {
this.owner = component;
},
- /**
- * Fired when the tool element is clicked
+ /**
+ * Called when the tool element is clicked
* @private
* @param {Ext.EventObject} e
* @param {HTMLElement} target The target element
@@ -225,7 +244,7 @@ Ext.define('Ext.panel.Tool', {
onClick: function(e, target) {
var me = this,
owner;
-
+
if (me.disabled) {
return false;
}
@@ -243,17 +262,17 @@ Ext.define('Ext.panel.Tool', {
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
+ /**
+ * Called when the user presses their mouse button down on a tool
* Adds the press class ({@link #toolPressedCls})
* @private
*/
@@ -265,7 +284,7 @@ Ext.define('Ext.panel.Tool', {
this.el.addCls(this.toolPressedCls);
},
- /**
+ /**
* Called when the user rolls over a tool
* Adds the over class ({@link #toolOverCls})
* @private
@@ -277,7 +296,7 @@ Ext.define('Ext.panel.Tool', {
this.el.addCls(this.toolOverCls);
},
- /**
+ /**
* Called when the user rolls out from a tool.
* Removes the over class ({@link #toolOverCls})
* @private
@@ -285,4 +304,6 @@ Ext.define('Ext.panel.Tool', {
onMouseOut: function() {
this.el.removeCls(this.toolOverCls);
}
-});