examples/ux/TabScrollerMenu.js

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