← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/workspace/extjs/examples/ux/TabScrollerMenu.js

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/ecosystem/workspace/extjs/examples/ux/TabScrollerMenu.js
 
1
/*!
 
2
 * Ext JS Library 3.0.0
 
3
 * Copyright(c) 2006-2009 Ext JS, LLC
 
4
 * licensing@extjs.com
 
5
 * http://www.extjs.com/license
 
6
 */
 
7
 
 
8
 
 
9
Ext.ux.TabScrollerMenu =  Ext.extend(Object, {
 
10
        pageSize       : 10,
 
11
        maxText        : 15,
 
12
        menuPrefixText : 'Items',
 
13
        constructor    : function(config) {
 
14
                config = config || {};
 
15
                Ext.apply(this, config);
 
16
        },
 
17
        init : function(tabPanel) {
 
18
                Ext.apply(tabPanel, this.tabPanelMethods);
 
19
                
 
20
                tabPanel.tabScrollerMenu = this;
 
21
                var thisRef = this;
 
22
                
 
23
                tabPanel.on({
 
24
                        render : {
 
25
                                scope  : tabPanel,
 
26
                                single : true,
 
27
                                fn     : function() { 
 
28
                                        var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
 
29
                                        tabPanel.createScrollers = newFn;
 
30
                                }
 
31
                        }
 
32
                });
 
33
        },
 
34
        // private && sequeneced
 
35
        createPanelsMenu : function() {
 
36
                var h = this.stripWrap.dom.offsetHeight;
 
37
                
 
38
                //move the right menu item to the left 18px
 
39
                var rtScrBtn = this.header.dom.firstChild;
 
40
                Ext.fly(rtScrBtn).applyStyles({
 
41
                        right : '18px'
 
42
                });
 
43
                
 
44
                var stripWrap = Ext.get(this.strip.dom.parentNode);
 
45
                stripWrap.applyStyles({
 
46
                         'margin-right' : '36px'
 
47
                });
 
48
                
 
49
                // Add the new righthand menu
 
50
                var scrollMenu = this.header.insertFirst({
 
51
                        cls:'x-tab-tabmenu-right'
 
52
                });
 
53
                scrollMenu.setHeight(h);
 
54
                scrollMenu.addClassOnOver('x-tab-tabmenu-over');
 
55
                scrollMenu.on('click', this.showTabsMenu, this);        
 
56
                
 
57
                this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
 
58
                        scrollMenu.show();                                                                                                                                               
 
59
                });
 
60
                
 
61
                this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
 
62
                        scrollMenu.hide();                                                              
 
63
                });
 
64
                
 
65
        },
 
66
        // public
 
67
        getPageSize : function() {
 
68
                return this.pageSize;
 
69
        },
 
70
        // public
 
71
        setPageSize : function(pageSize) {
 
72
                this.pageSize = pageSize;
 
73
        },
 
74
        // public
 
75
        getMaxText : function() {
 
76
                return this.maxText;
 
77
        },
 
78
        // public
 
79
        setMaxText : function(t) {
 
80
                this.maxText = t;
 
81
        },
 
82
        getMenuPrefixText : function() {
 
83
                return this.menuPrefixText;
 
84
        },
 
85
        setMenuPrefixText : function(t) {
 
86
                this.menuPrefixText = t;
 
87
        },
 
88
        // private && applied to the tab panel itself.
 
89
        tabPanelMethods : {
 
90
                // all execute within the scope of the tab panel
 
91
                // private      
 
92
                showTabsMenu : function(e) {            
 
93
                        if (! this.tabsMenu) {
 
94
                                this.tabsMenu =  new Ext.menu.Menu();
 
95
                                this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu);
 
96
                        }
 
97
                        
 
98
                        this.tabsMenu.removeAll();
 
99
                        
 
100
                        this.generateTabMenuItems();
 
101
                        
 
102
                        var target = Ext.get(e.getTarget());
 
103
                        var xy     = target.getXY();
 
104
                        
 
105
                        //Y param + 24 pixels
 
106
                        xy[1] += 24;
 
107
                        
 
108
                        this.tabsMenu.showAt(xy);
 
109
                },
 
110
                // private      
 
111
                generateTabMenuItems : function() {
 
112
                        var curActive  = this.getActiveTab();
 
113
                        var totalItems = this.items.getCount();
 
114
                        var pageSize   = this.tabScrollerMenu.getPageSize();
 
115
                        
 
116
                        
 
117
                        if (totalItems > pageSize)  {
 
118
                                var numSubMenus = Math.floor(totalItems / pageSize);
 
119
                                var remainder   = totalItems % pageSize;
 
120
                                
 
121
                                // Loop through all of the items and create submenus in chunks of 10
 
122
                                for (var i = 0 ; i < numSubMenus; i++) {
 
123
                                        var curPage = (i + 1) * pageSize;
 
124
                                        var menuItems = [];
 
125
                                        
 
126
                                        
 
127
                                        for (var x = 0; x < pageSize; x++) {                            
 
128
                                                index = x + curPage - pageSize;
 
129
                                                var item = this.items.get(index);
 
130
                                                menuItems.push(this.autoGenMenuItem(item));
 
131
                                        }
 
132
                                        
 
133
                                        this.tabsMenu.add({
 
134
                                                text : this.tabScrollerMenu.getMenuPrefixText() + ' '  + (curPage - pageSize + 1) + ' - ' + curPage,
 
135
                                                menu : menuItems
 
136
                                        });
 
137
                                        
 
138
                                }
 
139
                                // remaining items
 
140
                                if (remainder > 0) {
 
141
                                        var start = numSubMenus * pageSize;
 
142
                                        menuItems = [];
 
143
                                        for (var i = start ; i < totalItems; i ++ ) {                                   
 
144
                                                var item = this.items.get(i);
 
145
                                                menuItems.push(this.autoGenMenuItem(item));
 
146
                                        }
 
147
                                        
 
148
                                        
 
149
                                        this.tabsMenu.add({
 
150
                                                text : this.tabScrollerMenu.menuPrefixText  + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
 
151
                                                menu : menuItems
 
152
                                        });
 
153
                                        
 
154
 
 
155
                                }
 
156
                        }
 
157
                        else {
 
158
                                this.items.each(function(item) {
 
159
                                        if (item.id != curActive.id && ! item.hidden) {
 
160
                                                menuItems.push(this.autoGenMenuItem(item));
 
161
                                        }
 
162
                                }, this);
 
163
                        }       
 
164
                },
 
165
                // private
 
166
                autoGenMenuItem : function(item) {
 
167
                        var maxText = this.tabScrollerMenu.getMaxText();
 
168
                        var text    = Ext.util.Format.ellipsis(item.title, maxText);
 
169
                        
 
170
                        return {
 
171
                                text      : text,
 
172
                                handler   : this.showTabFromMenu,
 
173
                                scope     : this,
 
174
                                disabled  : item.disabled,
 
175
                                tabToShow : item,
 
176
                                iconCls   : item.iconCls
 
177
                        }
 
178
                
 
179
                },
 
180
                // private
 
181
                showTabFromMenu : function(menuItem) {
 
182
                        this.setActiveTab(menuItem.tabToShow);
 
183
                }       
 
184
        }       
 
185
});