View Full Version : Ext.ux.grid.plugin.ProgressColumn

2 Sep 2010, 7:06 AM
Ext.ux.grid.plugin.ProgressColumn is a Grid plugin that shows a progress bar for the integer value of that column.

By default a number between 0 and 100 is expected but this can be changed by setting the 'ceiling' config option.

By default the bar will be colored in a red, orange, green progression. The 'invertedColor' config option can be set to true to reverse this.

To use the standard Ext.ProgressBar coloring set the 'colored' config option to false.

There are also config options 'topText' and 'bottomText' to add text above and below the progress bar.

Finally, the action to start editing the column can be defined with the 'actionEvent' config option. The default is 'click'.

This is an updated version of my grid plugin (http://www.sencha.com/learn/Extension:ProgressColumn) for Ext 2.x.

This has been tested working in Firefox 3.x and Internet Explorer 6 & 7.

Extract the attachment into the examples/grid folder for a demo. (Must be behind a webserver to load the plants.xml file)


2 Sep 2010, 8:05 AM
Here's a screenshot because I know how everyone loves screenshots


9 Sep 2010, 1:20 PM
Dude... this is awesome! Great work!

26 Oct 2010, 3:35 PM
Great work. This is far more useful than the one provided by Animal (no offence) as it actually shows a progress bar based on the figures present, rather than relying on a fake image of the current progress.

I made a few modifications so that you can override how the value is calculated and how it is formatted.

getText: function(v, p, record) {
var textClass = (v < (this.ceiling / 1.818)) ? 'x-progress-text-back' : 'x-progress-text-front';
var text = String.format('</div><div class="x-progress-text {0}">{1}</div></div>',
return (v < (this.ceiling / 1.031)) ? text.substring(0, text.length - 6) : text.substr(6);

* Return a formatted string to display within the progress bar
* Overwrite this in your call to format how you wish
* @param Float value The current value
* @return String The formatted string
* @author Joel Nation
format : function (value) {
return value + this.textPst
* Calculate the value from the provided record
* Overwrite this in your call to perform your own work on the record

* @param Ext.data.Record record The record of the current row
* @return Float The calculated value
* @author Joel Nation
calcFunc : function (record) {
return record.get(this.dataIndex);

renderer: function(v, p, record) {
p.css += ' x-grid3-progresscol';

v = this.calcFunc.call(this, record);
if(!v) v = 0;

// the empty comment makes IE collapse empty divs
return String.format(
'{0}<div class="x-progress-wrap' + (Ext.isIE ? ' x-progress-wrap-ie">' : '">') +
'<!-- --><div class="x-progress-inner">' +
'<div class="x-progress-bar x-progress-bar{1}" style="width:{2}%;">{3}' +
'</div>' +
this.getTopText(v, p, record),
this.getStyle(v, p, record),
(v / this.ceiling) * 100,
this.getText(v, p, record),
this.getBottomText(v, p, record));