Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / TabScrollerMenu.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
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>    \r
188 </body>\r
189 </html>