X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/panel/Tool.js?ds=sidebyside
diff --git a/src/panel/Tool.js b/src/panel/Tool.js
new file mode 100644
index 00000000..3f2798e9
--- /dev/null
+++ b/src/panel/Tool.js
@@ -0,0 +1,288 @@
+/**
+ * @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: ['
'],
+
+ /**
+ * @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
+ *
+ */
+
+ /**
+ * @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
+ *
+ */
+
+ /**
+ * @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'
+ );
+
+ //
+ 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');
+ }
+ //
+
+ 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);
+ }
+});
\ No newline at end of file