examples/ux/TabScrollerMenu.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.ns('Ext.ux');
  16 /**
  17  * @class Ext.ux.TabScrollerMenu
  18  * @extends Object
  19  * Plugin (ptype = 'tabscrollermenu') for adding a tab menu to a TabBar is the Tabs overflow.
  20  * @constructor
  21  * @param {Object} config Configuration options
  22  * @ptype tabscrollermenu
  23  */
  24 Ext.define('Ext.ux.TabScrollerMenu', {
  25     alias: 'plugin.tabscrollermenu',
  26
  27     uses: ['Ext.menu.Menu'],
  28
  29     /**
  30      * @cfg {Number} pageSize How many items to allow per submenu.
  31      */
  32     pageSize: 10,
  33     /**
  34      * @cfg {Number} maxText How long should the title of each {@link Ext.menu.Item} be.
  35      */
  36     maxText: 15,
  37     /**
  38      * @cfg {String} menuPrefixText Text to prefix the submenus.
  39      */
  40     menuPrefixText: 'Items',
  41     constructor: function(config) {
  42         config = config || {};
  43         Ext.apply(this, config);
  44     },
  45     //private
  46     init: function(tabPanel) {
  47         var me = this;
  48
  49         Ext.apply(tabPanel, me.parentOverrides);
  50         me.tabPanel = tabPanel;
  51
  52         tabPanel.on({
  53             render: function() {
  54                 me.tabBar = tabPanel.tabBar;
  55                 me.layout = me.tabBar.layout;
  56                 me.layout.overflowHandler.handleOverflow = Ext.Function.bind(me.showButton, me);
  57                 me.layout.overflowHandler.clearOverflow = Ext.Function.createSequence(me.layout.overflowHandler.clearOverflow, me.hideButton, me);
  58             },
  59             single: true
  60         });
  61     },
  62
  63     showButton: function() {
  64         var me = this,
  65             result = Ext.getClass(me.layout.overflowHandler).prototype.handleOverflow.apply(me.layout.overflowHandler, arguments);
  66
  67         if (!me.menuButton) {
  68             me.menuButton = me.tabBar.body.createChild({
  69                 cls: Ext.baseCSSPrefix + 'tab-tabmenu-right'
  70             }, me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-scroller-right'));
  71             me.menuButton.addClsOnOver(Ext.baseCSSPrefix + 'tab-tabmenu-over');
  72             me.menuButton.on('click', me.showTabsMenu, me);
  73         }
  74         me.menuButton.show();
  75         result.targetSize.width -= me.menuButton.getWidth();
  76         return result;
  77     },
  78
  79     hideButton: function() {
  80         var me = this;
  81         if (me.menuButton) {
  82             me.menuButton.hide();
  83         }
  84     },
  85
  86     /**
  87      * Returns an the current page size (this.pageSize);
  88      * @return {Number} this.pageSize The current page size.
  89      */
  90     getPageSize: function() {
  91         return this.pageSize;
  92     },
  93     /**
  94      * Sets the number of menu items per submenu "page size".
  95      * @param {Number} pageSize The page size
  96      */
  97     setPageSize: function(pageSize) {
  98         this.pageSize = pageSize;
  99     },
 100     /**
 101      * Returns the current maxText length;
 102      * @return {Number} this.maxText The current max text length.
 103      */
 104     getMaxText: function() {
 105         return this.maxText;
 106     },
 107     /**
 108      * Sets the maximum text size for each menu item.
 109      * @param {Number} t The max text per each menu item.
 110      */
 111     setMaxText: function(t) {
 112         this.maxText = t;
 113     },
 114     /**
 115      * Returns the current menu prefix text String.;
 116      * @return {String} this.menuPrefixText The current menu prefix text.
 117      */
 118     getMenuPrefixText: function() {
 119         return this.menuPrefixText;
 120     },
 121     /**
 122      * Sets the menu prefix text String.
 123      * @param {String} t The menu prefix text.
 124      */
 125     setMenuPrefixText: function(t) {
 126         this.menuPrefixText = t;
 127     },
 128
 129     showTabsMenu: function(e) {
 130         var me = this;
 131
 132         if (me.tabsMenu) {
 133             me.tabsMenu.removeAll();
 134         } else {
 135             me.tabsMenu = Ext.create('Ext.menu.Menu');
 136             me.tabPanel.on('destroy', me.tabsMenu.destroy, me.tabsMenu);
 137         }
 138
 139         me.generateTabMenuItems();
 140
 141         var target = Ext.get(e.getTarget());
 142         var xy = target.getXY();
 143
 144         //Y param + 24 pixels
 145         xy[1] += 24;
 146
 147         me.tabsMenu.showAt(xy);
 148     },
 149
 150     // private
 151     generateTabMenuItems: function() {
 152         var me = this,
 153             tabPanel = me.tabPanel,
 154             curActive = tabPanel.getActiveTab(),
 155             totalItems = tabPanel.items.getCount(),
 156             pageSize = me.getPageSize(),
 157             numSubMenus = Math.floor(totalItems / pageSize),
 158             remainder = totalItems % pageSize,
 159             i, curPage, menuItems, x, item, start, index;
 160
 161         if (totalItems > pageSize) {
 162
 163             // Loop through all of the items and create submenus in chunks of 10
 164             for (i = 0; i < numSubMenus; i++) {
 165                 curPage = (i + 1) * pageSize;
 166                 menuItems = [];
 167
 168                 for (x = 0; x < pageSize; x++) {
 169                     index = x + curPage - pageSize;
 170                     item = tabPanel.items.get(index);
 171                     menuItems.push(me.autoGenMenuItem(item));
 172                 }
 173
 174                 me.tabsMenu.add({
 175                     text: me.getMenuPrefixText() + ' ' + (curPage - pageSize + 1) + ' - ' + curPage,
 176                     menu: menuItems
 177                 });
 178             }
 179             // remaining items
 180             if (remainder > 0) {
 181                 start = numSubMenus * pageSize;
 182                 menuItems = [];
 183                 for (i = start; i < totalItems; i++) {
 184                     item = tabPanel.items.get(i);
 185                     menuItems.push(me.autoGenMenuItem(item));
 186                 }
 187
 188                 me.tabsMenu.add({
 189                     text: me.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
 190                     menu: menuItems
 191                 });
 192
 193             }
 194         }
 195         else {
 196             tabPanel.items.each(function(item) {
 197                 if (item.id != curActive.id && !item.hidden) {
 198                     me.tabsMenu.add(me.autoGenMenuItem(item));
 199                 }
 200             });
 201         }
 202     },
 203
 204     // private
 205     autoGenMenuItem: function(item) {
 206         var maxText = this.getMaxText(),
 207             text = Ext.util.Format.ellipsis(item.title, maxText);
 208
 209         return {
 210             text: text,
 211             handler: this.showTabFromMenu,
 212             scope: this,
 213             disabled: item.disabled,
 214             tabToShow: item,
 215             iconCls: item.iconCls
 216         };
 217     },
 218
 219     // private
 220     showTabFromMenu: function(menuItem) {
 221         this.tabPanel.setActiveTab(menuItem.tabToShow);
 222     }
 223 });
 224