Extjs: progressBar in cell grid not displaying - extjs

Question

I'm using Extjs 4.1
In my application, i'm displaying a grid with some actionColumns, when a task is launched through those actioncolumns, i want to display a progress bar in the grid. There should be a progress bar for each record in the grid.
This how I had it:
columns: [{...}
{
header:'In Progress',
dataIndex : 'inProgress',
flex: 1,
renderer: function(value, meta, record){
if (value){
var id = Ext.id();
Ext.defer(function(){
var pBar=Ext.widget('ProgressBar',{
renderTo: id,
rec: record,
});
},150);
return Ext.String.format('<div id="{0}"></div>', id);
}else{
return value;
}
}
}],
The progress bar is correctly created (the code of the progress bar is running, see below) but it is not displayed/rendered.
Any idea as where my code is wrong?
here is the code of the custom progressbar:
Ext.define('V_ProgressBar', {
extend: 'Ext.ProgressBar',
alias: 'widget.ProgressBar',
height: 50,
layout:'fit',
constructor:function(param){
var rec=param.rec;
barConfig = this.config;
value=0.5
this.value=value;
this.callParent([barConfig]);
this.update(this, value);
},
update:function(pbar, value){
console.log(pbar.value)
if (value<1){
console.log(value)
value+=0.1;
pbar.updateProgress(value);
Ext.Function.defer(pbar.update, 3000, this, [pbar,value]);
}
else{
pbar.updateText("done");
}
}

Answer 1

Use Ext.defer
header: "Porcentual Concluído",
flex:0.3,
dataIndex: 'porcentualtotal',
renderer: function(value, meta, record){
if(record.data.porcentualtotal == null){
record.data.porcentualtotal = 0;
}
pt = record.data.porcentualtotal/100;
var id = Ext.id();
Ext.defer(function (id,pt) {
var p = Ext.create('Ext.ProgressBar',{
renderTo: id,
animate: true,
width: '100%',
value: pt,
text: (pt*100)+"%",
});
}, 50, undefined, [id,pt]);
return "<div id='" + id + "'></div>";
},