PDA

View Full Version : Progress Bar Update Problem



ironhide707
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.

Thanks.

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

ironhide707
10 Nov 2013, 11:04 PM
Anyone???

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

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


}

Romick
18 Nov 2013, 12:57 AM
Hi!
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:
http://jsfiddle.net/rC6Q7/24/
Do you still have an issue? Or maybe some other part of code causing it?



(http://jsfiddle.net/rC6Q7/24/)

ironhide707
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.

ironhide707
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?

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

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