X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/SplitButton.html?ds=sidebyside diff --git a/docs/source/SplitButton.html b/docs/source/SplitButton.html new file mode 100644 index 00000000..62262624 --- /dev/null +++ b/docs/source/SplitButton.html @@ -0,0 +1,127 @@ + +
+/** + * @class Ext.SplitButton + * @extends Ext.Button + * A split button that provides a built-in dropdown arrow that can fire an event separately from the default + * click event of the button. Typically this would be used to display a dropdown menu that provides additional + * options to the primary button action, but any custom handler can provide the arrowclick implementation. Example usage: + *+ + \ No newline at end of file+ * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event) + * @cfg {String} arrowTooltip The title attribute of the arrow + * @constructor + * Create a new menu button + * @param {Object} config The config object + * @xtype splitbutton + */ +Ext.SplitButton = Ext.extend(Ext.Button, { + // private + arrowSelector : 'em', + split: true, + + // private + initComponent : function(){ + Ext.SplitButton.superclass.initComponent.call(this); + /** + * @event arrowclick + * Fires when this button's arrow is clicked + * @param {MenuButton} this + * @param {EventObject} e The click event + */ + this.addEvents("arrowclick"); + }, + + // private + onRender : function(){ + Ext.SplitButton.superclass.onRender.apply(this, arguments); + if(this.arrowTooltip){ + this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip; + } + }, + + /** + * Sets this button's arrow click handler. + * @param {Function} handler The function to call when the arrow is clicked + * @param {Object} scope (optional) Scope for the function passed above + */ + setArrowHandler : function(handler, scope){ + this.arrowHandler = handler; + this.scope = scope; + }, + + getMenuClass : function(){ + return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : ''); + }, + + isClickOnArrow : function(e){ + return this.arrowAlign != 'bottom' ? + e.getPageX() > this.el.child(this.buttonSelector).getRegion().right : + e.getPageY() > this.el.child(this.buttonSelector).getRegion().bottom; + }, + + // private + onClick : function(e, t){ + e.preventDefault(); + if(!this.disabled){ + if(this.isClickOnArrow(e)){ + if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){ + this.showMenu(); + } + this.fireEvent("arrowclick", this, e); + if(this.arrowHandler){ + this.arrowHandler.call(this.scope || this, this, e); + } + }else{ + if(this.enableToggle){ + this.toggle(); + } + this.fireEvent("click", this, e); + if(this.handler){ + this.handler.call(this.scope || this, this, e); + } + } + } + }, + + // private + isMenuTriggerOver : function(e){ + return this.menu && e.target.tagName == 'em'; + }, + + // private + isMenuTriggerOut : function(e, internal){ + return this.menu && e.target.tagName != 'em'; + } +}); + +Ext.reg('splitbutton', Ext.SplitButton);+// display a dropdown menu: +new Ext.SplitButton({ + renderTo: 'button-ct', // the container id + text: 'Options', + handler: optionsHandler, // handle a click on the button itself + menu: new Ext.menu.Menu({ + items: [ + // these items will render as dropdown menu items when the arrow is clicked: + {text: 'Item 1', handler: item1Handler}, + {text: 'Item 2', handler: item2Handler} + ] + }) +}); + +// Instead of showing a menu, you provide any type of custom +// functionality you want when the dropdown arrow is clicked: +new Ext.SplitButton({ + renderTo: 'button-ct', + text: 'Options', + handler: optionsHandler, + arrowHandler: myCustomHandler +}); +