View Full Version : How to put a progressbar on a column of a grid ?

19 Oct 2012, 6:15 AM
I already have something, but the way it is working is a bit weird...

header: '<center>Progress</center>',
dataIndex: 'progress',
align: 'center',
flex: 1,
sortable: false,
hideable: false,
resizable: false,
renderer: function (value) { // Get value from 0 to 100
var id = Ext.id();
Ext.defer(function () {
Ext.widget('progressbar', {
renderTo: id,
value: value / 100,
text: value.toString() + ' %',
flex: 1
}, 500);
return Ext.String.format('<div id="{0}"></div>', id);
I think that it's a bit bizard to put a chrono to display the bar just because the config renderer is launch before the render of the line in the grid... So is there another way to do that ?
Then, another thing I don't understand is that if I display the value at the begining of the renderer function, I have good values like 3, 6, 9, 13, 16, 19, ... wich is good because it looks like a progression. But the display of my bar doesn't change (no different text and value).

So, I'm modifying the progress value of my store. The only thing I want is a progressbar text: '0 %', value: '0', at the begining, and the bar to move when I change the value of the store field.

Thanks in advance for help !

23 Oct 2012, 6:35 AM
I wouldn't use a progress bar component here, I personally would use a div and adjust the width based on the value