Upgrade to ExtJS 4.0.2 - Released 06/09/2011

[extjs.git] / examples / ux / TabScrollerMenu.js

diff --git a/examples/ux/TabScrollerMenu.js b/examples/ux/TabScrollerMenu.js
index 6991313..d0b4235 100644 (file)
--- a/examples/ux/TabScrollerMenu.js
+++ b/examples/ux/TabScrollerMenu.js
@@ -1,223 +1,224 @@
-/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact:  http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/

 Ext.ns('Ext.ux');
 /**
  * @class Ext.ux.TabScrollerMenu
 Ext.ns('Ext.ux');
 /**
  * @class Ext.ux.TabScrollerMenu

- * @extends Object 
- * Plugin (ptype = 'tabscrollermenu') for adding a tab scroller menu to tabs.
- * @constructor 
+ * @extends Object
+ * Plugin (ptype = 'tabscrollermenu') for adding a tab menu to a TabBar is the Tabs overflow.
+ * @constructor

  * @param {Object} config Configuration options
  * @ptype tabscrollermenu
  */
  * @param {Object} config Configuration options
  * @ptype tabscrollermenu
  */

-Ext.ux.TabScrollerMenu =  Ext.extend(Object, {
+Ext.define('Ext.ux.TabScrollerMenu', {
+    alias: 'plugin.tabscrollermenu',
+
+    uses: ['Ext.menu.Menu'],
+

     /**
      * @cfg {Number} pageSize How many items to allow per submenu.
      */
     /**
      * @cfg {Number} pageSize How many items to allow per submenu.
      */

-       pageSize       : 10,
+    pageSize: 10,

     /**
      * @cfg {Number} maxText How long should the title of each {@link Ext.menu.Item} be.
      */
     /**
      * @cfg {Number} maxText How long should the title of each {@link Ext.menu.Item} be.
      */

-       maxText        : 15,
+    maxText: 15,

     /**
      * @cfg {String} menuPrefixText Text to prefix the submenus.
     /**
      * @cfg {String} menuPrefixText Text to prefix the submenus.

-     */    
-       menuPrefixText : 'Items',
-       constructor    : function(config) {
-               config = config || {};
-               Ext.apply(this, config);
-       },
+     */
+    menuPrefixText: 'Items',
+    constructor: function(config) {
+        config = config || {};
+        Ext.apply(this, config);
+    },

     //private
     //private

-       init : function(tabPanel) {
-               Ext.apply(tabPanel, this.parentOverrides);
-               
-               tabPanel.tabScrollerMenu = this;
-               var thisRef = this;
-               
-               tabPanel.on({
-                       render : {
-                               scope  : tabPanel,
-                               single : true,
-                               fn     : function() { 
-                                       var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
-                                       tabPanel.createScrollers = newFn;
-                               }
-                       }
-               });
-       },
-       // private && sequeneced
-       createPanelsMenu : function() {
-               var h = this.stripWrap.dom.offsetHeight;
-               
-               //move the right menu item to the left 18px
-               var rtScrBtn = this.header.dom.firstChild;
-               Ext.fly(rtScrBtn).applyStyles({
-                       right : '18px'
-               });
-               
-               var stripWrap = Ext.get(this.strip.dom.parentNode);
-               stripWrap.applyStyles({
-                        'margin-right' : '36px'
-               });
-               
-               // Add the new righthand menu
-               var scrollMenu = this.header.insertFirst({
-                       cls:'x-tab-tabmenu-right'
-               });
-               scrollMenu.setHeight(h);
-               scrollMenu.addClassOnOver('x-tab-tabmenu-over');
-               scrollMenu.on('click', this.showTabsMenu, this);        
-               
-               this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
-                       scrollMenu.show();                                                                                                                                               
-               });
-               
-               this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
-                       scrollMenu.hide();                                                              
-               });
-               
-       },
+    init: function(tabPanel) {
+        var me = this;
+
+        Ext.apply(tabPanel, me.parentOverrides);
+        me.tabPanel = tabPanel;
+
+        tabPanel.on({
+            render: function() {
+                me.tabBar = tabPanel.tabBar;
+                me.layout = me.tabBar.layout;
+                me.layout.overflowHandler.handleOverflow = Ext.Function.bind(me.showButton, me);
+                me.layout.overflowHandler.clearOverflow = Ext.Function.createSequence(me.layout.overflowHandler.clearOverflow, me.hideButton, me);
+            },
+            single: true
+        });
+    },
+
+    showButton: function() {
+        var me = this,
+            result = Ext.getClass(me.layout.overflowHandler).prototype.handleOverflow.apply(me.layout.overflowHandler, arguments);
+
+        if (!me.menuButton) {
+            me.menuButton = me.tabBar.body.createChild({
+                cls: Ext.baseCSSPrefix + 'tab-tabmenu-right'
+            }, me.tabBar.body.child('.' + Ext.baseCSSPrefix + 'box-scroller-right'));
+            me.menuButton.addClsOnOver(Ext.baseCSSPrefix + 'tab-tabmenu-over');
+            me.menuButton.on('click', me.showTabsMenu, me);
+        }
+        me.menuButton.show();
+        result.targetSize.width -= me.menuButton.getWidth();
+        return result;
+    },
+
+    hideButton: function() {
+        var me = this;
+        if (me.menuButton) {
+            me.menuButton.hide();
+        }
+    },
+

     /**
      * Returns an the current page size (this.pageSize);
      * @return {Number} this.pageSize The current page size.
      */
     /**
      * Returns an the current page size (this.pageSize);
      * @return {Number} this.pageSize The current page size.
      */

-       getPageSize : function() {
-               return this.pageSize;
-       },
+    getPageSize: function() {
+        return this.pageSize;
+    },

     /**
      * Sets the number of menu items per submenu "page size".
      * @param {Number} pageSize The page size
      */
     /**
      * Sets the number of menu items per submenu "page size".
      * @param {Number} pageSize The page size
      */

-    setPageSize : function(pageSize) {
-               this.pageSize = pageSize;
-       },
+    setPageSize: function(pageSize) {
+        this.pageSize = pageSize;
+    },

     /**
      * Returns the current maxText length;
      * @return {Number} this.maxText The current max text length.
      */
     /**
      * Returns the current maxText length;
      * @return {Number} this.maxText The current max text length.
      */

-    getMaxText : function() {
-               return this.maxText;
-       },
+    getMaxText: function() {
+        return this.maxText;
+    },

     /**
      * Sets the maximum text size for each menu item.
      * @param {Number} t The max text per each menu item.
      */
     /**
      * Sets the maximum text size for each menu item.
      * @param {Number} t The max text per each menu item.
      */

-    setMaxText : function(t) {
-               this.maxText = t;
-       },
+    setMaxText: function(t) {
+        this.maxText = t;
+    },

     /**
      * Returns the current menu prefix text String.;
      * @return {String} this.menuPrefixText The current menu prefix text.
      */
     /**
      * Returns the current menu prefix text String.;
      * @return {String} this.menuPrefixText The current menu prefix text.
      */

-       getMenuPrefixText : function() {
-               return this.menuPrefixText;
-       },
+    getMenuPrefixText: function() {
+        return this.menuPrefixText;
+    },

     /**
      * Sets the menu prefix text String.
      * @param {String} t The menu prefix text.
     /**
      * Sets the menu prefix text String.
      * @param {String} t The menu prefix text.

-     */    
-       setMenuPrefixText : function(t) {
-               this.menuPrefixText = t;
-       },
-       // private && applied to the tab panel itself.
-       parentOverrides : {
-               // all execute within the scope of the tab panel
-               // private      
-               showTabsMenu : function(e) {            
-                       if  (this.tabsMenu) {
-                               this.tabsMenu.destroy();
-                this.un('destroy', this.tabsMenu.destroy, this.tabsMenu);
-                this.tabsMenu = null;
-                       }
-            this.tabsMenu =  new Ext.menu.Menu();
-            this.on('destroy', this.tabsMenu.destroy, this.tabsMenu);
-
-            this.generateTabMenuItems();
-
-            var target = Ext.get(e.getTarget());
-                       var xy     = target.getXY();
-//
-                       //Y param + 24 pixels
-                       xy[1] += 24;
-                       
-                       this.tabsMenu.showAt(xy);
-               },
-               // private      
-               generateTabMenuItems : function() {
-                       var curActive  = this.getActiveTab();
-                       var totalItems = this.items.getCount();
-                       var pageSize   = this.tabScrollerMenu.getPageSize();
-                       
-                       
-                       if (totalItems > pageSize)  {
-                               var numSubMenus = Math.floor(totalItems / pageSize);
-                               var remainder   = totalItems % pageSize;
-                               
-                               // Loop through all of the items and create submenus in chunks of 10
-                               for (var i = 0 ; i < numSubMenus; i++) {
-                                       var curPage = (i + 1) * pageSize;
-                                       var menuItems = [];
-                                       
-                                       
-                                       for (var x = 0; x < pageSize; x++) {                            
-                                               index = x + curPage - pageSize;
-                                               var item = this.items.get(index);
-                                               menuItems.push(this.autoGenMenuItem(item));
-                                       }
-                                       
-                                       this.tabsMenu.add({
-                                               text : this.tabScrollerMenu.getMenuPrefixText() + ' '  + (curPage - pageSize + 1) + ' - ' + curPage,
-                                               menu : menuItems
-                                       });
-                                       
-                               }
-                               // remaining items
-                               if (remainder > 0) {
-                                       var start = numSubMenus * pageSize;
-                                       menuItems = [];
-                                       for (var i = start ; i < totalItems; i ++ ) {                                   
-                                               var item = this.items.get(i);
-                                               menuItems.push(this.autoGenMenuItem(item));
-                                       }
-                                       
-                                       this.tabsMenu.add({
-                                               text : this.tabScrollerMenu.menuPrefixText  + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
-                                               menu : menuItems
-                                       });
-
-                               }
-                       }
-                       else {
-                               this.items.each(function(item) {
-                                       if (item.id != curActive.id && !item.hidden) {
-                        this.tabsMenu.add(this.autoGenMenuItem(item));
-                                       }
-                               }, this);
-                       }
-               },
-               // private
-               autoGenMenuItem : function(item) {
-                       var maxText = this.tabScrollerMenu.getMaxText();
-                       var text    = Ext.util.Format.ellipsis(item.title, maxText);
-                       
-                       return {
-                               text      : text,
-                               handler   : this.showTabFromMenu,
-                               scope     : this,
-                               disabled  : item.disabled,
-                               tabToShow : item,
-                               iconCls   : item.iconCls
-                       }
-               
-               },
-               // private
-               showTabFromMenu : function(menuItem) {
-                       this.setActiveTab(menuItem.tabToShow);
-               }       
-       }       
+     */
+    setMenuPrefixText: function(t) {
+        this.menuPrefixText = t;
+    },
+
+    showTabsMenu: function(e) {
+        var me = this;
+
+        if (me.tabsMenu) {
+            me.tabsMenu.removeAll();
+        } else {
+            me.tabsMenu = Ext.create('Ext.menu.Menu');
+            me.tabPanel.on('destroy', me.tabsMenu.destroy, me.tabsMenu);
+        }
+
+        me.generateTabMenuItems();
+
+        var target = Ext.get(e.getTarget());
+        var xy = target.getXY();
+
+        //Y param + 24 pixels
+        xy[1] += 24;
+
+        me.tabsMenu.showAt(xy);
+    },
+
+    // private
+    generateTabMenuItems: function() {
+        var me = this,
+            tabPanel = me.tabPanel,
+            curActive = tabPanel.getActiveTab(),
+            totalItems = tabPanel.items.getCount(),
+            pageSize = me.getPageSize(),
+            numSubMenus = Math.floor(totalItems / pageSize),
+            remainder = totalItems % pageSize,
+            i, curPage, menuItems, x, item, start, index;
+
+        if (totalItems > pageSize) {
+
+            // Loop through all of the items and create submenus in chunks of 10
+            for (i = 0; i < numSubMenus; i++) {
+                curPage = (i + 1) * pageSize;
+                menuItems = [];
+
+                for (x = 0; x < pageSize; x++) {
+                    index = x + curPage - pageSize;
+                    item = tabPanel.items.get(index);
+                    menuItems.push(me.autoGenMenuItem(item));
+                }
+
+                me.tabsMenu.add({
+                    text: me.getMenuPrefixText() + ' ' + (curPage - pageSize + 1) + ' - ' + curPage,
+                    menu: menuItems
+                });
+            }
+            // remaining items
+            if (remainder > 0) {
+                start = numSubMenus * pageSize;
+                menuItems = [];
+                for (i = start; i < totalItems; i++) {
+                    item = tabPanel.items.get(i);
+                    menuItems.push(me.autoGenMenuItem(item));
+                }
+
+                me.tabsMenu.add({
+                    text: me.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
+                    menu: menuItems
+                });
+
+            }
+        }
+        else {
+            tabPanel.items.each(function(item) {
+                if (item.id != curActive.id && !item.hidden) {
+                    me.tabsMenu.add(me.autoGenMenuItem(item));
+                }
+            });
+        }
+    },
+
+    // private
+    autoGenMenuItem: function(item) {
+        var maxText = this.getMaxText(),
+            text = Ext.util.Format.ellipsis(item.title, maxText);
+
+        return {
+            text: text,
+            handler: this.showTabFromMenu,
+            scope: this,
+            disabled: item.disabled,
+            tabToShow: item,
+            iconCls: item.iconCls
+        };
+    },
+
+    // private
+    showTabFromMenu: function(menuItem) {
+        this.tabPanel.setActiveTab(menuItem.tabToShow);
+    }

 });
 
 });
 

-Ext.reg('tabscrollermenu', Ext.ux.TabScrollerMenu);