docs/source/TabScrollerMenu.html

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