View Full Version : [2.x] How to integrate the Progress Bar with the Paging Toolbar

29 Jan 2009, 4:55 AM
Related Blog Post: http://tdg-i.com/63/how-to-integrate-the-progress-bar-with-the-paging-toolbar
While the Paging Toolbar class was introduced in Ext 1.0, it has changed little to the users moving all the way up to 3.0 as we know it. In Ext 2.0, the Progress Bar class was introduced. A couple of days ago, I posted (http://extjs.com/forum/showthread.php?t=58058) about this idea and got some good responses, so I decided to finalize the 2.2 extension, Ext.ux.plugins.progressPagingToolbar. Yes, I know itís an ugly name.

MJ Lecomte (http://extjs.com/forum/member.php?u=6834) suggested (http://extjs.com/forum/reputation.php?p=278375) a plugin instead of an extension for Ext 3, which made a whole lot of sense. So, I created the plugin for the Ext 3.0 branch, which I cannot link to the private beta link for the plugin until Ext 3 is generally available (GA).

Download: zip (http://tdg-i.com/js/examples/ext/tdgiux/tabScrollerMenu/progressPagingToolbar.zip) (contains related javascript);

Example page: http://tdg-i.com/js/examples/ext/tdgiux/progressPagingToolbar/
http://tdg-i.com/img/screencasts/2009-01-29_0728.png (http://tdg-i.com/js/examples/ext/tdgiux/progressPagingToolbar/)

UPDATE 4/10/2009 The Ext 3.0 version can be seen here:


8 Apr 2009, 8:26 AM
Hi there Jay.

I was looking at this and i found another very useful function for this progress paging toolbar.

I made by my own (not so cool) knowledge a modification to this plugin.

I was thinking when there are so many pages in the grid to display, and you have only the functionality to go next page or last page, well this plugin is cool for a click on percent to get the page at position, lol.

So i made this:
I added an id to get the progress bar element (this is the way i know or the way i made it more easily), and then added a on click function and the class to get the cursor changed to the hand.
here is the code:

this.displayItem = new Ext.ProgressBar({
id : 'displayprogress',
renderTo : this.displayEl,
text : this.defaultText,
width : this.progBarWidth || 225,
animate : this.defaultAnimCfg,
cls : 'cursor:pointer'
var progressBar = Ext.get('displayprogress')

progressBar.on({'click' : {
fn: function(e){
var box = progressBar.getBox();
var xy = e.getXY();
var position = xy[0]-box[0];
pages = Math.ceil(this.store.getTotalCount()/20);
newpage = Math.ceil(position/(this.displayItem.width/pages));
scope: this,
delay: 100

And now your paging toolbar can bring you to the page you want just clicking on any place at it...

Here is the example:

And here is the new plugin modified:

I changed the store elements to match 2500 because there you can see the real use of the plugin with the click added.

I think is a better way to navigate all the pages if you have a lot in the grid.

Thanks for sharing your Cool plugin

P.D.: i would love if you can get the on click event and the class change to add the cursor in the same declaration of the "new Ext.ProgressBar". I tryed but well i can't make it work. Also try to make it more elegant if you have time with all your stuff of course (nice book by the way i read the first available chapter in the webpage)

8 Apr 2009, 8:29 AM
holy crap that is awesome!!

8 Apr 2009, 8:54 AM
holy crap that is awesome!!

hehe i see you like it :D

When i saw your plugin this morning and the idea come in my mind, i also say, that would be awesome!!!

8 Apr 2009, 8:56 AM
May i have your permission to post it in my blog?

8 Apr 2009, 9:01 AM
Of course, you can post it and modify your plugin with the idea too, (you can change the title of this thread if you like too). Its an open world lol. Of course is not so much what i have done, almost all the job was done in the main plugin. ;)

Maybe you change the version of the plugin to beta 2 lol

8 Apr 2009, 9:06 AM
Awesome. I'm going to update it for Ext 3.0 too :)

8 Apr 2009, 3:03 PM
ok if you updated it i found a little bug.

In the line:

pages = Math.ceil(this.store.getTotalCount()/20);

That 20 is the number of rows per page, i put the default but if someone put for example 50 then the pages will be calculated bad. So it has to change to:

pages = Math.ceil(this.store.getTotalCount()/this.displayItem.pageSize());

So the calc is done with the current pageSize and not the 20 by default.

hehe i was in my way to the bank when i don't know why i think of it and found a solution right away in the way lol, sometimes the mind acts crazy. Now that i get to my home i am telling you so you don't put any wrong code on it (if you haven't changed it yet)


10 Apr 2009, 9:04 AM
Syscobra, refactored your code for the Ext 3.0 plugin:

Ext.ns('Ext.ux', 'Ext.ux.plugins');
Ext.ux.plugins.ProgressPagingToolbar = 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) {

pb.el.on('click', this.handleProgressBarClick, this);
}, this);

scope : this,
beforeDestroy : function() {
this.progressBar.el.un('click', this.handleProgressBarClick, this);


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));

//overrides, private
parentOverrides : {
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);

10 Apr 2009, 10:09 AM
Hi there Jay, nice code now its very well adapted (i need to understand more the api to get my works in this nice maner)
Now i have to wait until 3.0 is out to test it, lol.

12 May 2009, 7:21 PM
Hey Jay.
Today i was in youtube and then i got a new idea for this extension.

I am telling you this to see if you can make it or i could try to make it if you cant.

The idea is we can have a Follow Mouse Quicktip saying the page you will obtain if you click on that place. So it you rollover somepart of the progress bar you can have a quicktip on top saying something like "Page X/XX" or something like that.

If you enter in any video of youtube and you rollover the video progress bar you will get the time of that position, its the same idea.
Let me know if you can make it.

Nos vemos!!! :D

13 May 2009, 8:44 PM
Jay i just made it, and i make a new post in the 3.0 user extensions