examples/ux/TabScrollerMenu.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.ns('Ext.ux');
   8 /**
   9  * @class Ext.ux.TabScrollerMenu
  10  * @extends Object
  11  * Plugin (ptype = 'tabscrollermenu') for adding a tab scroller menu to tabs.
  12  * @constructor
  13  * @param {Object} config Configuration options
  14  * @ptype tabscrollermenu
  15  */
  16 Ext.ux.TabScrollerMenu =  Ext.extend(Object, {
  17     /**
  18      * @cfg {Number} pageSize How many items to allow per submenu.
  19      */
  20         pageSize       : 10,
  21     /**
  22      * @cfg {Number} maxText How long should the title of each {@link Ext.menu.Item} be.
  23      */
  24         maxText        : 15,
  25     /**
  26      * @cfg {String} menuPrefixText Text to prefix the submenus.
  27      */
  28         menuPrefixText : 'Items',
  29         constructor    : function(config) {
  30                 config = config || {};
  31                 Ext.apply(this, config);
  32         },
  33     //private
  34         init : function(tabPanel) {
  35                 Ext.apply(tabPanel, this.parentOverrides);
  36
  37                 tabPanel.tabScrollerMenu = this;
  38                 var thisRef = this;
  39
  40                 tabPanel.on({
  41                         render : {
  42                                 scope  : tabPanel,
  43                                 single : true,
  44                                 fn     : function() {
  45                                         var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
  46                                         tabPanel.createScrollers = newFn;
  47                                 }
  48                         }
  49                 });
  50         },
  51         // private && sequeneced
  52         createPanelsMenu : function() {
  53                 var h = this.stripWrap.dom.offsetHeight;
  54
  55                 //move the right menu item to the left 18px
  56                 var rtScrBtn = this.header.dom.firstChild;
  57                 Ext.fly(rtScrBtn).applyStyles({
  58                         right : '18px'
  59                 });
  60
  61                 var stripWrap = Ext.get(this.strip.dom.parentNode);
  62                 stripWrap.applyStyles({
  63                          'margin-right' : '36px'
  64                 });
  65
  66                 // Add the new righthand menu
  67                 var scrollMenu = this.header.insertFirst({
  68                         cls:'x-tab-tabmenu-right'
  69                 });
  70                 scrollMenu.setHeight(h);
  71                 scrollMenu.addClassOnOver('x-tab-tabmenu-over');
  72                 scrollMenu.on('click', this.showTabsMenu, this);
  73
  74                 this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
  75                         scrollMenu.show();
  76                 });
  77
  78                 this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
  79                         scrollMenu.hide();
  80                 });
  81
  82         },
  83     /**
  84      * Returns an the current page size (this.pageSize);
  85      * @return {Number} this.pageSize The current page size.
  86      */
  87         getPageSize : function() {
  88                 return this.pageSize;
  89         },
  90     /**
  91      * Sets the number of menu items per submenu "page size".
  92      * @param {Number} pageSize The page size
  93      */
  94     setPageSize : function(pageSize) {
  95                 this.pageSize = pageSize;
  96         },
  97     /**
  98      * Returns the current maxText length;
  99      * @return {Number} this.maxText The current max text length.
 100      */
 101     getMaxText : function() {
 102                 return this.maxText;
 103         },
 104     /**
 105      * Sets the maximum text size for each menu item.
 106      * @param {Number} t The max text per each menu item.
 107      */
 108     setMaxText : function(t) {
 109                 this.maxText = t;
 110         },
 111     /**
 112      * Returns the current menu prefix text String.;
 113      * @return {String} this.menuPrefixText The current menu prefix text.
 114      */
 115         getMenuPrefixText : function() {
 116                 return this.menuPrefixText;
 117         },
 118     /**
 119      * Sets the menu prefix text String.
 120      * @param {String} t The menu prefix text.
 121      */
 122         setMenuPrefixText : function(t) {
 123                 this.menuPrefixText = t;
 124         },
 125         // private && applied to the tab panel itself.
 126         parentOverrides : {
 127                 // all execute within the scope of the tab panel
 128                 // private
 129                 showTabsMenu : function(e) {
 130                         if  (this.tabsMenu) {
 131                                 this.tabsMenu.destroy();
 132                 this.un('destroy', this.tabsMenu.destroy, this.tabsMenu);
 133                 this.tabsMenu = null;
 134                         }
 135             this.tabsMenu =  new Ext.menu.Menu();
 136             this.on('destroy', this.tabsMenu.destroy, this.tabsMenu);
 137
 138             this.generateTabMenuItems();
 139
 140             var target = Ext.get(e.getTarget());
 141                         var xy     = target.getXY();
 142 //
 143                         //Y param + 24 pixels
 144                         xy[1] += 24;
 145
 146                         this.tabsMenu.showAt(xy);
 147                 },
 148                 // private
 149                 generateTabMenuItems : function() {
 150                         var curActive  = this.getActiveTab();
 151                         var totalItems = this.items.getCount();
 152                         var pageSize   = this.tabScrollerMenu.getPageSize();
 153
 154
 155                         if (totalItems > pageSize)  {
 156                                 var numSubMenus = Math.floor(totalItems / pageSize);
 157                                 var remainder   = totalItems % pageSize;
 158
 159                                 // Loop through all of the items and create submenus in chunks of 10
 160                                 for (var i = 0 ; i < numSubMenus; i++) {
 161                                         var curPage = (i + 1) * pageSize;
 162                                         var menuItems = [];
 163
 164
 165                                         for (var x = 0; x < pageSize; x++) {
 166                                                 index = x + curPage - pageSize;
 167                                                 var item = this.items.get(index);
 168                                                 menuItems.push(this.autoGenMenuItem(item));
 169                                         }
 170
 171                                         this.tabsMenu.add({
 172                                                 text : this.tabScrollerMenu.getMenuPrefixText() + ' '  + (curPage - pageSize + 1) + ' - ' + curPage,
 173                                                 menu : menuItems
 174                                         });
 175
 176                                 }
 177                                 // remaining items
 178                                 if (remainder > 0) {
 179                                         var start = numSubMenus * pageSize;
 180                                         menuItems = [];
 181                                         for (var i = start ; i < totalItems; i ++ ) {
 182                                                 var item = this.items.get(i);
 183                                                 menuItems.push(this.autoGenMenuItem(item));
 184                                         }
 185
 186                                         this.tabsMenu.add({
 187                                                 text : this.tabScrollerMenu.menuPrefixText  + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
 188                                                 menu : menuItems
 189                                         });
 190
 191                                 }
 192                         }
 193                         else {
 194                                 this.items.each(function(item) {
 195                                         if (item.id != curActive.id && ! item.hidden) {
 196                                                 menuItems.push(this.autoGenMenuItem(item));
 197                                         }
 198                                 }, this);
 199                         }
 200                 },
 201                 // private
 202                 autoGenMenuItem : function(item) {
 203                         var maxText = this.tabScrollerMenu.getMaxText();
 204                         var text    = Ext.util.Format.ellipsis(item.title, maxText);
 205
 206                         return {
 207                                 text      : text,
 208                                 handler   : this.showTabFromMenu,
 209                                 scope     : this,
 210                                 disabled  : item.disabled,
 211                                 tabToShow : item,
 212                                 iconCls   : item.iconCls
 213                         }
 214
 215                 },
 216                 // private
 217                 showTabFromMenu : function(menuItem) {
 218                         this.setActiveTab(menuItem.tabToShow);
 219                 }
 220         }
 221 });
 222
 223 Ext.reg('tabscrollermenu', Ext.ux.TabScrollerMenu);