source: trunk/web/addons/job_monarch/lib/extjs-30/TabScrollerMenu.js @ 647

Last change on this file since 647 was 631, checked in by ramonb, 15 years ago

job_monarch/templates/header.tpl,

  • fixed path typo

job_monarch/js/monarch.js:

  • many tabbed graphs fixes

job_monarch/lib/extjs-30/tab-scroller-menu.css,
job_monarch/lib/extjs-30/ProgressBarPager.js,
job_monarch/lib/extjs-30/tab-scroller-menu.gif,
job_monarch/lib/extjs-30/TabScrollerMenu.js:

  • import of some new ExtJS plugins
File size: 4.4 KB
Line 
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
9Ext.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});
Note: See TracBrowser for help on using the repository browser.