Is it possible to obtain the HTML representation of a progress bar before it is rendered anywhere?
I am currently using a custom renderer for rendering a progress column in a grid:
renderer: function( value, metaData, record, rowIndex, colIndex, store ) {
var id = Ext.id();
(function(){
var progress = new Ext.ProgressBar({
renderTo: id,
value: progress_value
});
}).defer(50);
return '<div id="'+ id + '"></div>';
}
However, this approach is not very user-friendly as the progress bars are rendered after the grid has been rendered.
I believe it might be achievable to create a custom progress bar with this feature by examining the template source code that is transformed into HTML. Although I consider this method less elegant.
The ideal solution would involve creating a function like the following:
var generateRenderer = (function(){
var pb = new Ext.ProgressBar();
return function( progress_value ){
pb.updateValue( progress_value );
return pb.htmlRepresentationFunction();
}
})();
Where htmlRepresentationFunction() generates the HTML representation and then incorporating the generateRenderer() function within the custom renderer.