X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/panel/Tool.js
diff --git a/src/panel/Tool.js b/src/panel/Tool.js
index 17694145..9e1af3ce 100644
--- a/src/panel/Tool.js
+++ b/src/panel/Tool.js
@@ -13,44 +13,38 @@ If you are unsure which license is appropriate for your use, please contact the
*/
/**
- * @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
+ * 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',
@@ -62,65 +56,67 @@ Ext.define('Ext.panel.Tool', {
toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
toolOverCls: Ext.baseCSSPrefix + 'tool-over',
ariaRole: 'button',
- renderTpl: ['
'],
-
+ renderTpl: [''],
+
/**
* @cfg {Function} handler
- * A function to execute when the tool is clicked.
- * Arguments passed are:
- *
- * - event : Ext.EventObject
The click event.
- * - toolEl : Ext.core.Element
The tool Element.
- * - panel : Ext.panel.Panel
The host Panel
- * - tool : Ext.panel.Tool
The tool object
- *
+ * 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:
- *
- * - 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
- *
+ *
+ * - 
close
+ * - minimize
+ * - maximize
+ * - restore
+ * - toggle
+ * - gear
+ * - prev
+ * - next
+ * - pin
+ * - unpin
+ * - right
+ * - left
+ * - down
+ * - up
+ * - refresh
+ * - plus
+ * - minus
+ * - search
+ * - save
+ * - help
+ * - print
+ * - expand
+ * - 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,
@@ -135,41 +131,41 @@ Ext.define('Ext.panel.Tool', {
*/
'click'
);
-
+
//
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 && 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');
}
//
-
+
me.type = me.type || me.id;
Ext.applyIf(me.renderData, {
@@ -177,22 +173,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);
}
}
@@ -206,13 +209,13 @@ 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;
@@ -230,7 +233,7 @@ Ext.define('Ext.panel.Tool', {
},
/**
- * 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
@@ -238,7 +241,7 @@ Ext.define('Ext.panel.Tool', {
onClick: function(e, target) {
var me = this,
owner;
-
+
if (me.disabled) {
return false;
}
@@ -256,17 +259,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
*/