extjs 3 - add progressbar and image in property grid - extjs

Question

Is it possible to implement progressbar in property grid in extjs 3? How do I add an image in property grid?
I have a value in percentage and I want to represent that in progressbar (its uneditable).
Thanks a lot for help.

Answer 1

You could try something like this:
//==== Progress bar 1 ====
var pbar1 = new Ext.ProgressBar({
id:'pbar1',
width:300
});
var grid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
autoHeight: true,
width: 300,
renderTo: 'grid-ct',
bbar: pbar1, //You can set the progress bar as the property girds bottom toolbar.
customRenderers: {
Available: function(v){
return '<img src="path to image" />';
}
}, //This would render the image into the Available property.
source: {
"(name)": "My Object",
"Created": new Date(Date.parse('10/15/2006')),
"Available": false,
"Version": .01,
"Description": "A test object"
}
});
When using customRenderers to render the image
The name of the renderer type should correspond with the name of the property that it will render For more see the API.

Answer 2

This is the first thing I though about. But it's still not so user friendly as it's render progressbars after grid is rendered.
This is custom renderer for your progress column:
renderer: function( value, metaData, record, rowIndex, colIndex, store ) {
var id = Ext.id();
(function(){
var progress = new Ext.ProgressBar({
renderTo: id,
value: progress_value
});
}).defer(25);
return '<div id="'+ id + '"></div>';
}
It renders <div id="generated-id"/> and then renders generated progressbar into this div.
It would be better to use some kind of closure to create progressbar only once and to return it's html via custom renderer as in the example above, but unfortunately I don't know yet how to do it in Ext.js 3. As for Ext.js 4 you can see this thread at sencha forum