extjs/packages/ux/classic/src/TabScrollerMenu.js

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