开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
SplitButton.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：4k
源码类别：

中间件编程

开发平台：

JavaScript

SplitButton.js：源码内容
  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.SplitButton
  3.  * @extends Ext.Button
  4.  * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
  5.  * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
  6.  * options to the primary button action, but any custom handler can provide the arrowclick implementation.  Example usage:
  7.  * <pre><code>
  8. // display a dropdown menu:
  9. new Ext.SplitButton({
  10. renderTo: 'button-ct', // the container id
  11.     text: 'Options',
  12.     handler: optionsHandler, // handle a click on the button itself
  13.     menu: new Ext.menu.Menu({
  14.         items: [
  15.          // these items will render as dropdown menu items when the arrow is clicked:
  16.         {text: 'Item 1', handler: item1Handler},
  17.         {text: 'Item 2', handler: item2Handler}
  18.         ]
  19.     })
  20. });
  22. // Instead of showing a menu, you provide any type of custom
  23. // functionality you want when the dropdown arrow is clicked:
  24. new Ext.SplitButton({
  25. renderTo: 'button-ct',
  26.     text: 'Options',
  27.     handler: optionsHandler,
  28.     arrowHandler: myCustomHandler
  29. });
  30. </code></pre>
  31.  * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
  32.  * @cfg {String} arrowTooltip The title attribute of the arrow
  33.  * @constructor
  34.  * Create a new menu button
  35.  * @param {Object} config The config object
  36.  * @xtype splitbutton
  37.  */
  38. Ext.SplitButton = Ext.extend(Ext.Button, {
  39. // private
  40.     arrowSelector : 'em',
  41.     split: true,
  43.     // private
  44.     initComponent : function(){
  45.         Ext.SplitButton.superclass.initComponent.call(this);
  46.         /**
  47.          * @event arrowclick
  48.          * Fires when this button's arrow is clicked
  49.          * @param {MenuButton} this
  50.          * @param {EventObject} e The click event
  51.          */
  52.         this.addEvents("arrowclick");
  53.     },
  55.     // private
  56.     onRender : function(){
  57.         Ext.SplitButton.superclass.onRender.apply(this, arguments);
  58.         if(this.arrowTooltip){
  59.             this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
  60.         }
  61.     },
  63.     /**
  64.      * Sets this button's arrow click handler.
  65.      * @param {Function} handler The function to call when the arrow is clicked
  66.      * @param {Object} scope (optional) Scope for the function passed above
  67.      */
  68.     setArrowHandler : function(handler, scope){
  69.         this.arrowHandler = handler;
  70.         this.scope = scope;
  71.     },
  73.     getMenuClass : function(){
  74.         return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');
  75.     },
  77.     isClickOnArrow : function(e){
  78.         return this.arrowAlign != 'bottom' ?
  79.                e.getPageX() > this.el.child(this.buttonSelector).getRegion().right :
  80.                e.getPageY() > this.el.child(this.buttonSelector).getRegion().bottom;
  81.     },
  83.     // private
  84.     onClick : function(e, t){
  85.         e.preventDefault();
  86.         if(!this.disabled){
  87.             if(this.isClickOnArrow(e)){
  88.                 if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
  89.                     this.showMenu();
  90.                 }
  91.                 this.fireEvent("arrowclick", this, e);
  92.                 if(this.arrowHandler){
  93.                     this.arrowHandler.call(this.scope || this, this, e);
  94.                 }
  95.             }else{
  96.                 if(this.enableToggle){
  97.                     this.toggle();
  98.                 }
  99.                 this.fireEvent("click", this, e);
  100.                 if(this.handler){
  101.                     this.handler.call(this.scope || this, this, e);
  102.                 }
  103.             }
  104.         }
  105.     },
  107.     // private
  108.     isMenuTriggerOver : function(e){
  109.         return this.menu && e.target.tagName == 'em';
  110.     },
  112.     // private
  113.     isMenuTriggerOut : function(e, internal){
  114.         return this.menu && e.target.tagName != 'em';
  115.     }
  116. });
  118. Ext.reg('splitbutton', Ext.SplitButton);