I have a simple cell renderer that displays a cell value as a progress bar in a grid cell.
As implemented it assumes a numeric value in the range 0-100 but that can easily be scaled if you like. It's just a <div> + css so can be used standalone easily. I have only tested in FF2.0 and IE6. First image shows how it looks. Second image is the red bar image file it uses.
http://img365.imageshack.us/img365/5189/progress2kp2.gif
http://img470.imageshack.us/img470/8776/redbarep9.gif
style:
.progress {
width: 100%;
height: 100%;
background-image: url("images/redbar.gif");
background-repeat: no-repeat;
text-color: #000000;
background-color: #B3D3EE;
border-width: 1px;
border-style: solid;
border-color: #336699;
}
column model:
cm = new Ext.grid.ColumnModel([
.
.
{header: "% Complete", width: 100, renderer: progress, dataIndex: 'percent_done'},
.
.
]);
custom renderer:
// custom renderer for status % complete
function progress(val){
if(val < 0) {
val = 0;
} else if(val > 100) {
val = 100;
}
if(val > 49){
return '<div class="progress" style="background-position: '+val+'% 10%; ">' + val + '</div>';
}else {
return '<div class="progress" style="background-position: '+val+'% 0%; text-indent: 90%;">' + val + '</div>';
}
return val;
}