docs/app/view/HoverMenuButton.js

   1 /**
   2  * Toolbar button with menu that appears when hovered over.
   3  */
   4 Ext.define('Docs.view.HoverMenuButton', {
   5     extend: 'Ext.toolbar.TextItem',
   6     alias: 'widget.hovermenubutton',
   7     componentCls: "hover-menu-button",
   8     requires: [
   9         'Docs.view.HoverMenu'
  10     ],
  11
  12     /**
  13      * @cfg {Ext.data.Store} store
  14      * Store with menu items (required).
  15      */
  16
  17     /**
  18      * @cfg {Object} menuCfg
  19      * Additional config options for {@link Docs.view.HoverMenu}
  20      */
  21     menuCfg: {},
  22
  23     /**
  24      * @cfg {Boolean} showCount
  25      * True to show small number in button indicating the number of items in menu.
  26      * Defaults to false.
  27      */
  28     showCount: false,
  29
  30     statics: {
  31         // Global list of all menus.
  32         // So we can hide all other menus while showing a specific one.
  33         menus: []
  34     },
  35
  36     initComponent: function() {
  37         this.addEvents(
  38             /**
  39              * @event click
  40              * Fired when button clicked.
  41              */
  42             "click",
  43             /**
  44              * @event closeclick
  45              * Fired when close link in menu clicked.
  46              * @param {String} name  Name of the class and or member that was closed.
  47              * For example "Ext.Ajax" or "Ext.Ajax-method-request".
  48              */
  49             "closeclick"
  50         );
  51
  52         // Append links count to button text, update it when store filtered
  53         if (this.showCount) {
  54             this.initialText = this.text;
  55             this.text += ' <sup>' + this.store.getCount() + '</sup>';
  56             this.store.on("datachanged", function() {
  57                 this.setText(this.initialText + ' <sup>' + this.store.getCount() + '</sup>');
  58             }, this);
  59         }
  60
  61         this.menu = Ext.create('Docs.view.HoverMenu', Ext.apply({
  62             store: this.store
  63         }, this.menuCfg));
  64
  65         this.callParent(arguments);
  66     },
  67
  68     onRender: function() {
  69         this.callParent(arguments);
  70
  71         this.renderMenu();
  72
  73         this.getEl().on({
  74             click: function() {
  75                 this.fireEvent("click");
  76             },
  77             mouseover: function() {
  78                 // hide other menus
  79                 Ext.Array.forEach(Docs.view.HoverMenuButton.menus, function(menu) {
  80                     if (menu !== this.menu) {
  81                         menu.hide();
  82                     }
  83                 });
  84                 // stop pending menuhide process
  85                 clearTimeout(this.hideTimeout);
  86                 this.menu.show();
  87                 // position menu right below button and show it
  88                 var p = this.getEl().getXY();
  89                 this.menu.getEl().setStyle({
  90                     left: (p[0]-10)+"px",
  91                     top: (p[1]+23)+"px"
  92                 });
  93             },
  94             mouseout: this.deferHideMenu,
  95             scope: this
  96         });
  97
  98         this.menu.getEl().on({
  99             mouseover: function() {
 100                 clearTimeout(this.hideTimeout);
 101             },
 102             mouseout: this.deferHideMenu,
 103             scope: this
 104         });
 105
 106     },
 107
 108     onDestroy: function() {
 109         // clean up DOM
 110         this.menu.destroy();
 111         // remove from global menu list
 112         Ext.Array.remove(Docs.view.HoverMenuButton.menus, this.menu);
 113
 114         this.callParent(arguments);
 115     },
 116
 117     renderMenu: function() {
 118         this.menu.getEl().setVisibilityMode(Ext.core.Element.DISPLAY);
 119         this.menu.hide();
 120
 121         this.menu.getEl().addListener('click', function(e) {
 122             if (e.getTarget(".close")) {
 123                 this.fireEvent("closeclick", e.getTarget().rel);
 124             } else {
 125                 this.menu.hide();
 126             }
 127             e.preventDefault();
 128         }, this);
 129
 130         Docs.view.HoverMenuButton.menus.push(this.menu);
 131     },
 132
 133     deferHideMenu: function() {
 134         this.hideTimeout = Ext.Function.defer(function() {
 135             this.menu.hide();
 136         }, 200, this);
 137     },
 138
 139     /**
 140      * Returns the store used by menu.
 141      * @return {Ext.data.Store}
 142      */
 143     getStore: function() {
 144         return this.store;
 145     }
 146
 147 });