--- /dev/null
+/**
+ * @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);
+ }
+});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff