View Full Version : Progress Bar inside a Grid cell

12 Mar 2012, 9:43 PM

I want to put a progressbar inside a grid. I created a renderer function like this :

function extjsRenderer(value) {
var id = Ext.id();

(function() {
if (value < 50) {
var bar = new Ext.ProgressBar({
height: 15,
renderTo: id,
value: (value / 100)
} else if (value < 75) {
var btn = new Ext.Button({
renderTo: id,
text: 'Price: ' + value
} else {
var txt = new Ext.form.TextField({
value: value,
renderTo: id,
height: 15

return (String.format('<div id="{0}"></div>', id));

But I am getting the error as "Object does not support the method 'format'". So, I removed String.format,but instead of a progress bar it is showing me ext-gen1031,ext-gen1032,ext-gen1033 inside the grid.

Can you tell me what is wrong in my code?


12 Mar 2012, 10:25 PM

I am able to see the progress bar by changing the return statement to

return '<div role="presentation" class="x-progress x-progress-default" id="progressbar"><div style="height: 20px; width: 35px;" id="progressbar-1022-bar" class="x-progress-bar"><div id="' + id + '" class="x-progress x-progress-default"></div></div></div>';

But It is a static bar. I have used animate attribute to show the progress as follows :
animate: {from:{height: 20,width: 0},
to:{height: 20,width: 30},
duration: 200}
But, i am unable to see the progress and its a static bar.
Is there any other way to achieve this?


13 Mar 2012, 9:45 PM
Is there any solution?


17 Mar 2012, 1:36 PM
String.format is not a function. Ext.String.format exists though, but it won't help you in your first post. You are trying to render to an element that does not exist. You are making it overcomplicated, just use a TemplateColumn that outputs 2 nested divs and style those using CSS. Very simple problem :)

17 Mar 2012, 3:38 PM
Demo here http://ext4all.com/post/progress-bar-inside-a-grid-cell

19 Mar 2012, 1:47 PM
Nice trick!

7 Apr 2012, 3:53 AM
That will leave orphaned ProgressBar instances all over the place after having rendered into the transient cell.

Use a special renderer which reuses a single instance of ProgressBar, and just gets the correct markup to use in the cell:

var progressRenderer = (function () {
var b = new Ext.ProgressBar({height: 15});
return function(progress) {
return Ext.DomHelper.markup(b.getRenderTree());

30 Aug 2012, 4:02 PM
Hi Animal,

thx for this tip. I'm having the same problem that with every new column creation (e.g. when sorting) a new ProgressBar instance is created. Do I understand your code correctly, that I should create the progressBar only once and each time my cell render function is called it just returns the progressBar Markup in the return statement?

Ok, got it working, but now the PB doesn't size correctly... The 100% it sizes too are of course not the 100% of the grid cell it renders to later!

26 Feb 2013, 7:31 AM
Thanks too Animal :D ! After a few tries, it works ! (ExtJS 4.1.3).

The 'older' solution (http://ext4all.com/post/progress-bar-inside-a-grid-cell) worked with ExtJs 4.0.7, but with ExtJS 4.1.3, the rendering of the column generated javascript errors.

text : 'Column Title'
width : 130,
sortable : true,
dataIndex: 'ColumnDataIndex',
renderer: function (v, m, r) {
var tmpValue = v / 100;
var tmpText = r.data.Data1 + ' / ' +r.data.Data2;
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);

Result in grid :


7 May 2013, 3:14 PM
Hi guys,

I used this code for adding a progressbar in my grid and works fine. But after adding a progressbar inside a grid cell, is it also possible change progressbar's alignment in the cell and the label's alignment inside the progressbar (for example all to right or all to center)? How can I do it? Using this code, I have progressbar (and its label) only aligned to left and I don't know how to change it...

I hope that problem is clear.If it isn't, please tell me, thank you!!

again, thanks a lot


1 Jan 2014, 5:24 AM
Hey phamel,
I tried your code and it also works fine but it takes too much CPU usage like 100% when it starts rendering, can you tell me why it does this and is there any workaround to this?