Ext.ux.grid.plugin.ProgressColumn

[KRavEN]

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)

22220

[KRavEN]

Here's a screenshot because I know how everyone loves screenshots

22223

[thirstypixel]

Dude... this is awesome! Great work!

[Joel]

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>',
textClass,
this.format(v)
);
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>' +
'</div>{4}',
this.getTopText(v, p, record),
this.getStyle(v, p, record),
(v / this.ceiling) * 100,
this.getText(v, p, record),
this.getBottomText(v, p, record));
}