-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
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
*/
-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.
*/
- pageSize : 10,
+ pageSize: 10,
/**
* @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.
- */
- menuPrefixText : 'Items',
- constructor : function(config) {
- config = config || {};
- Ext.apply(this, config);
- },
+ */
+ menuPrefixText: 'Items',
+ constructor: function(config) {
+ config = config || {};
+ Ext.apply(this, config);
+ },
//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.
*/
- 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
*/
- 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.
*/
- 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.
*/
- 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.
*/
- getMenuPrefixText : function() {
- return this.menuPrefixText;
- },
+ getMenuPrefixText: function() {
+ return this.menuPrefixText;
+ },
/**
* 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);
+ }
-Ext.reg('tabscrollermenu', Ext.ux.TabScrollerMenu);
+ 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);
+ }
+});
git.ithinksw.org / extjs.git / blobdiff