Index: trunk/web/addons/job_monarch/js/monarch.js =================================================================== --- trunk/web/addons/job_monarch/js/monarch.js (revision 630) +++ trunk/web/addons/job_monarch/js/monarch.js (revision 631) @@ -950,4 +950,11 @@ function createGraphPanel( view ) { + var scrollerMenu = new Ext.ux.TabScrollerMenu( + { + maxText : 15, + pageSize : 5 + }); + + var graphPanel = @@ -955,18 +962,16 @@ { id: 'tabPanel', - region: 'center', + //region: 'center', //bodyStyle: 'background: transparent', autoShow: true, //autoHeight: true, - autoWidth: true, - //autoScroll: true, - //resizeTabs: true, + //autoWidth: true, + enableTabScroll:true, + resizeTabs: true, + border: false, bodyStyle: 'overflow:auto; background: transparent; heigth: auto', - //bodyStyle: 'overflow:auto; background: transparent', - //bodyBorder: false, minTabWidth: 60, - //tabWidth: 135, - enableTabScroll:true, - //resizeTabs: false, + plugins: [ scrollerMenu ], + // RB TODO: range combobox; hour, day, week, etc @@ -1023,8 +1028,10 @@ animCollapse: true, maximizable: true, + layout: 'fit', //autoScroll: true, //defaults: {autoScroll:true}, title: 'Node graph details', - tbar: panel, + //tbar: panel, + items: panel, listeners: Index: trunk/web/addons/job_monarch/lib/extjs-30/ProgressBarPager.js =================================================================== --- trunk/web/addons/job_monarch/lib/extjs-30/ProgressBarPager.js (revision 631) +++ trunk/web/addons/job_monarch/lib/extjs-30/ProgressBarPager.js (revision 631) @@ -0,0 +1,121 @@ +/*! + * Ext JS Library 3.0.0 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** +* @class Ext.ux.ProgressBarPager +* @extends Object +* Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text +* +* @ptype progressbarpager +* @constructor +* Create a new ItemSelector +* @param {Object} config Configuration options +* @xtype itemselector +*/ +Ext.ux.ProgressBarPager = Ext.extend(Object, { + /** + * @cfg {Integer} progBarWidth + *
The default progress bar width. Default is 225.
+ */ + progBarWidth : 225, + /** + * @cfg {String} defaultText + *The text to display while the store is loading. Default is 'Loading...'
+ */ + defaultText : 'Loading...', + /** + * @cfg {Object} defaultAnimCfg + *A {@link Ext.Fx Ext.Fx} configuration object. Default is { duration : 1, easing : 'bounceOut' }.
+ */ + defaultAnimCfg : { + duration : 1, + easing : 'bounceOut' + }, + constructor : function(config) { + if (config) { + Ext.apply(this, config); + } + }, + //public + init : function (parent) { + + if(parent.displayInfo){ + this.parent = parent; + var ind = parent.items.indexOf(parent.displayItem); + parent.remove(parent.displayItem, true); + this.progressBar = new Ext.ProgressBar({ + text : this.defaultText, + width : this.progBarWidth, + animate : this.defaultAnimCfg + }); + + parent.displayItem = this.progressBar; + + parent.add(parent.displayItem); + parent.doLayout(); + Ext.apply(parent, this.parentOverrides); + + this.progressBar.on('render', function(pb) { + pb.el.applyStyles('cursor:pointer'); + + pb.el.on('click', this.handleProgressBarClick, this); + }, this); + + + // Remove the click handler from the + this.progressBar.on({ + scope : this, + beforeDestroy : function() { + this.progressBar.el.un('click', this.handleProgressBarClick, this); + } + }); + + } + + }, + // private + // This method handles the click for the progress bar + handleProgressBarClick : function(e){ + var parent = this.parent; + var displayItem = parent.displayItem; + + var box = this.progressBar.getBox(); + var xy = e.getXY(); + var position = xy[0]-box.x; + var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize); + + var newpage = Math.ceil(position/(displayItem.width/pages)); + parent.changePage(newpage); + }, + + // private, overriddes + parentOverrides : { + // private + // This method updates the information via the progress bar. + updateInfo : function(){ + if(this.displayItem){ + var count = this.store.getCount(); + var pgData = this.getPageData(); + var pageNum = this.readPage(pgData); + + var msg = count == 0 ? + this.emptyMsg : + String.format( + this.displayMsg, + this.cursor+1, this.cursor+count, this.store.getTotalCount() + ); + + pageNum = pgData.activePage; ; + + var pct = pageNum / pgData.pages; + + this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig); + } + } + } +}); +Ext.preg('progressbarpager', Ext.ux.ProgressBarPager); + Index: trunk/web/addons/job_monarch/lib/extjs-30/TabScrollerMenu.js =================================================================== --- trunk/web/addons/job_monarch/lib/extjs-30/TabScrollerMenu.js (revision 631) +++ trunk/web/addons/job_monarch/lib/extjs-30/TabScrollerMenu.js (revision 631) @@ -0,0 +1,185 @@ +/*! + * Ext JS Library 3.0.0 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ + + +Ext.ux.TabScrollerMenu = Ext.extend(Object, { + pageSize : 10, + maxText : 15, + menuPrefixText : 'Items', + constructor : function(config) { + config = config || {}; + Ext.apply(this, config); + }, + init : function(tabPanel) { + Ext.apply(tabPanel, this.tabPanelMethods); + + 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(); + }); + + }, + // public + getPageSize : function() { + return this.pageSize; + }, + // public + setPageSize : function(pageSize) { + this.pageSize = pageSize; + }, + // public + getMaxText : function() { + return this.maxText; + }, + // public + setMaxText : function(t) { + this.maxText = t; + }, + getMenuPrefixText : function() { + return this.menuPrefixText; + }, + setMenuPrefixText : function(t) { + this.menuPrefixText = t; + }, + // private && applied to the tab panel itself. + tabPanelMethods : { + // all execute within the scope of the tab panel + // private + showTabsMenu : function(e) { + if (! this.tabsMenu) { + this.tabsMenu = new Ext.menu.Menu(); + this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu); + } + + this.tabsMenu.removeAll(); + + 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) { + menuItems.push(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); + } + } +}); Index: trunk/web/addons/job_monarch/lib/extjs-30/tab-scroller-menu.css =================================================================== --- trunk/web/addons/job_monarch/lib/extjs-30/tab-scroller-menu.css (revision 631) +++ trunk/web/addons/job_monarch/lib/extjs-30/tab-scroller-menu.css (revision 631) @@ -0,0 +1,30 @@ +/*! + * Ext JS Library 3.0.0 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ +.x-tab-scroller-right-over { + background-position: -18px 0; +} + +.x-tab-tabmenu-right { + background: transparent url(tab-scroller-menu.gif) no-repeat 0 0; + border-bottom: 1px solid #8db2e3; + width:18px; + position:absolute; + right:0; + top:0; + z-index:10; + cursor:pointer; +} +.x-tab-tabmenu-over { + background-position: -18px 0; +} +.x-tab-tabmenu-disabled { + background-position: 0 0; + opacity:.5; + -moz-opacity:.5; + filter:alpha(opacity=50); + cursor:default; +} Index: trunk/web/addons/job_monarch/templates/header.tpl =================================================================== --- trunk/web/addons/job_monarch/templates/header.tpl (revision 630) +++ trunk/web/addons/job_monarch/templates/header.tpl (revision 631) @@ -13,4 +13,5 @@ + @@ -23,4 +24,5 @@ +