Hi all

I was thinking a new idea for the progress Bar Pager Extension, an extension made by Jay Garcia. I gave him the idea to have a Click-on-the-progress-bar => go-to-page function for his extension. Then looking at youtube i see they have a Quicktip to show on the video time bar the time you would go if you click on that position, so this brings me to what is this about.

I just modify some code of the extension and made a new function, put a quicktip and put a listener to get the mousemove events to update the quicktip with the "page-you-will-go-if-you-click". Its an small thing but maybe someone find it useful.

Here is an screenshot:

So here is the code modified(ProgressBarPager.js found on the grid examples) from the example in the 3.0RC1.1 sources.
 * Ext JS Library 3.0 RC1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * http://extjs.com/license

Ext.ux.ProgressBarPager  = Ext.extend(Object, {
	progBarWidth   : 225,
	defaultText    : 'Loading...',
	defaultAnimCfg : {
		duration   : 1,
		easing     : 'bounceOut'	
	constructor : function(config) {
		if (config) {
			Ext.apply(this, config);
	init : function (parent) {
			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;
			Ext.apply(parent, this.parentOverrides);		

			this.progressBar.on('render', function(pb) {

			this.pageToolTip = new Ext.ToolTip({
				target: pb.el,
				anchor: 'bottom',
				dismissDelay: 0,
				trackMouse : true,
				html: ' '
				pb.el.on('click', this.handleProgressBarClick, this);
				pb.el.on('mousemove', this.changePageTooltip, this);
			}, this);
			// Remove the click handler from the 
				scope         : this,
				beforeDestroy : function() {
					this.progressBar.el.un('click', this.handleProgressBarClick, this);	
					this.progressBar.el.un('mousemove', this.changePageTooltip, this);
	// This method calculate the new page from the position of mouse in the progress bar
	calculateNewPage : 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));
	if (newpage>pages) newpage=pages;

		return newpage;
	// This method handles the click for the progress bar
	handleProgressBarClick : function(e){
	// This method change the ToolTip for the correct page information
	changePageTooltip : function(e) {
		if (this.pageToolTip.rendered) this.pageToolTip.body.update(this.calculateNewPage(e));

	//overrides, private
	parentOverrides  : {
		// This method updates the information via the progress bar.
		updateInfo : function(){
				var count   = this.store.getCount();
				var pgData  = this.getPageData();
				var pageNum = this.readPage(pgData);
				var msg    = count == 0 ?
					this.emptyMsg :
						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);
Just changed the handleClick function and made another function to calculate the page you will go (to avoid repeating code on the "mousemove" listener).

I also added in the calculate function this line:
	if (newpage>pages) newpage=pages;
this is because sometimes you can get a "go to an unexistent page" the calculation produces.