View Full Version : Progress Bar Update Problem

7 Nov 2013, 11:09 PM
Hey guys,
I have just started working on extjs and might i say its a very cool framework, but i have ran into a problem. The problem is that i have a progressbar which i have update after every 1 sec and its value would be coming from a store in extjs. I was successful in inserting a progressbar in a grid column(using the renderer function) but ran into a problem when i had to update the the progress bar.

Take this for example:
I have a datastore (which i created using the store option in extjs pane). Now inside the 'data' option i put up these values :

{Name: 'Ed', Progress: '10' , Size:'100'}

Here, progress value is 10 so the progressBar says 10% , but when i change the value of Progress to '20'(using record.set() ), the progressbar does change the value to 20 but left aligns the text inside it. Please if someone has a solution for this then please let me know. I have also attached two pictures to give you a pictorial respresentation.


P.S : I also get an error when i try to debug on firefox using firebug:
The error is
"TypeError: u is null" at ext-all.js : line 21

10 Nov 2013, 11:04 PM

11 Nov 2013, 10:54 AM
Can you post your ProgressBar code?

12 Nov 2013, 3:40 AM
Sure, here it is :

renderer : function(value,metaData, record, rowIndex, colIndex, store, view)
var size = record.get('Size');
var tmpValue = value / size;
var tmpText = value/size *100 +"%";

var progressRenderer = (function (pValue, pText) {

var b = new Ext.ProgressBar();
return function(pValue, pText) {
b.updateProgress(pValue, pText, true);
return Ext.DomHelper.markup(b.getRenderTree());
})(tmpValue, tmpText);
return progressRenderer(tmpValue, tmpText);


18 Nov 2013, 12:57 AM
Can I just ask you why you are using so much closure structure? It is much more easier to understand without a clousure. Also if closure is needed than no problem, but in this case I think it is overvelmingly. My solution is here:
Do you still have an issue? Or maybe some other part of code causing it?


18 Nov 2013, 2:26 AM
Hey romick,
Well i just used this code from a site. Frankly speaking, i am just testing for a viable solution which is easy to implement and the closet i got to understanding a code was this :s so yeah sorry if this uses much closures i apologize for that. Anyways, i should look into the example which you gave me, maybe it could solve the problem i am facing :) . Thanks Romick.

18 Nov 2013, 2:29 AM
Hey romick,
I looked into the example you gave me. It is a very good example but still in this example the text inside the progressbar is still left aligned :( , what could be the problem here?

18 Nov 2013, 6:14 AM
I see your point. Try this http://jsfiddle.net/rC6Q7/31/
Just used timeout to render progressbar.

19 Nov 2013, 3:25 AM
OK thanks again Romick, I`ll let ay know if it works.