View Full Version : [3.x] progress Bar Pager Extension, with quicktips

13 May 2009, 8:43 PM
Hi all

I was thinking a new idea for the progress Bar Pager Extension, an extension (http://www.extjs.com/forum/showthread.php?t=58537)made by Jay Garcia. I gave him the idea (http://www.extjs.com/forum/showthread.php?p=314402#post314402) 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.
* [email protected]
* 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.