examples/docs/source/TabScrollerMenu.html

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