3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
9 * @class Ext.ux.TabScrollerMenu
11 * Plugin (ptype = 'tabscrollermenu') for adding a tab scroller menu to tabs.
13 * @param {Object} config Configuration options
14 * @ptype tabscrollermenu
16 Ext.ux.TabScrollerMenu = Ext.extend(Object, {
18 * @cfg {Number} pageSize How many items to allow per submenu.
22 * @cfg {Number} maxText How long should the title of each {@link Ext.menu.Item} be.
26 * @cfg {String} menuPrefixText Text to prefix the submenus.
28 menuPrefixText : 'Items',
29 constructor : function(config) {
30 config = config || {};
31 Ext.apply(this, config);
34 init : function(tabPanel) {
35 Ext.apply(tabPanel, this.parentOverrides);
37 tabPanel.tabScrollerMenu = this;
45 var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
46 tabPanel.createScrollers = newFn;
51 // private && sequeneced
52 createPanelsMenu : function() {
53 var h = this.stripWrap.dom.offsetHeight;
55 //move the right menu item to the left 18px
56 var rtScrBtn = this.header.dom.firstChild;
57 Ext.fly(rtScrBtn).applyStyles({
61 var stripWrap = Ext.get(this.strip.dom.parentNode);
62 stripWrap.applyStyles({
63 'margin-right' : '36px'
66 // Add the new righthand menu
67 var scrollMenu = this.header.insertFirst({
68 cls:'x-tab-tabmenu-right'
70 scrollMenu.setHeight(h);
71 scrollMenu.addClassOnOver('x-tab-tabmenu-over');
72 scrollMenu.on('click', this.showTabsMenu, this);
74 this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
78 this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
84 * Returns an the current page size (this.pageSize);
85 * @return {Number} this.pageSize The current page size.
87 getPageSize : function() {
91 * Sets the number of menu items per submenu "page size".
92 * @param {Number} pageSize The page size
94 setPageSize : function(pageSize) {
95 this.pageSize = pageSize;
98 * Returns the current maxText length;
99 * @return {Number} this.maxText The current max text length.
101 getMaxText : function() {
105 * Sets the maximum text size for each menu item.
106 * @param {Number} t The max text per each menu item.
108 setMaxText : function(t) {
112 * Returns the current menu prefix text String.;
113 * @return {String} this.menuPrefixText The current menu prefix text.
115 getMenuPrefixText : function() {
116 return this.menuPrefixText;
119 * Sets the menu prefix text String.
120 * @param {String} t The menu prefix text.
122 setMenuPrefixText : function(t) {
123 this.menuPrefixText = t;
125 // private && applied to the tab panel itself.
127 // all execute within the scope of the tab panel
129 showTabsMenu : function(e) {
131 this.tabsMenu.destroy();
132 this.un('destroy', this.tabsMenu.destroy, this.tabsMenu);
133 this.tabsMenu = null;
135 this.tabsMenu = new Ext.menu.Menu();
136 this.on('destroy', this.tabsMenu.destroy, this.tabsMenu);
138 this.generateTabMenuItems();
140 var target = Ext.get(e.getTarget());
141 var xy = target.getXY();
143 //Y param + 24 pixels
146 this.tabsMenu.showAt(xy);
149 generateTabMenuItems : function() {
150 var curActive = this.getActiveTab();
151 var totalItems = this.items.getCount();
152 var pageSize = this.tabScrollerMenu.getPageSize();
155 if (totalItems > pageSize) {
156 var numSubMenus = Math.floor(totalItems / pageSize);
157 var remainder = totalItems % pageSize;
159 // Loop through all of the items and create submenus in chunks of 10
160 for (var i = 0 ; i < numSubMenus; i++) {
161 var curPage = (i + 1) * pageSize;
165 for (var x = 0; x < pageSize; x++) {
166 index = x + curPage - pageSize;
167 var item = this.items.get(index);
168 menuItems.push(this.autoGenMenuItem(item));
172 text : this.tabScrollerMenu.getMenuPrefixText() + ' ' + (curPage - pageSize + 1) + ' - ' + curPage,
179 var start = numSubMenus * pageSize;
181 for (var i = start ; i < totalItems; i ++ ) {
182 var item = this.items.get(i);
183 menuItems.push(this.autoGenMenuItem(item));
187 text : this.tabScrollerMenu.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
194 this.items.each(function(item) {
195 if (item.id != curActive.id && !item.hidden) {
196 this.tabsMenu.add(this.autoGenMenuItem(item));
202 autoGenMenuItem : function(item) {
203 var maxText = this.tabScrollerMenu.getMaxText();
204 var text = Ext.util.Format.ellipsis(item.title, maxText);
208 handler : this.showTabFromMenu,
210 disabled : item.disabled,
212 iconCls : item.iconCls
217 showTabFromMenu : function(menuItem) {
218 this.setActiveTab(menuItem.tabToShow);
223 Ext.reg('tabscrollermenu', Ext.ux.TabScrollerMenu);