Grid Progress Column

[zombeerose]

Here is a simple Ext 4.0 grid column for displaying a progress bar. Values should be any number between 0 and 1 (e.g. 0.5), which is just like Ext.window.MessageBox#updateProgress


/**
* @class Ext.ux.grid.column.Progress
* @extends Ext.grid.Column
* <p>
* A Grid column type which renders a numeric value as a progress bar.
* </p>
* <p>
* <b>Notes:</b><ul>
* <li>Compatible with Ext 4.0</li>
* </ul>
* </p>
* Example usage:
* <pre><code>
var grid = new Ext.grid.Panel({
columns: [{
dataIndex: 'progress'
,xtype: 'progresscolumn'
},{
...
]}
...
});
* </code></pre>
* <p>The column can be at any index in the columns array, and a grid can have any number of progress columns.</p>
* @author Phil Crawford
* @license Licensed under the terms of the Open Source <a href="http://www.gnu.org/licenses/lgpl.html">LGPL 3.0 license</a>. Commercial use is permitted to the extent that the code/component(s) do NOT become part of another Open Source or Commercially licensed development library or toolkit without explicit permission.
* @version 0.1 (June 30, 2011)
* @constructor
* @param {Object} config
*/
Ext.define('Ext.ux.grid.column.Progress', {
extend: 'Ext.grid.column.Column'
,alias: 'widget.progresscolumn'

,cls: 'x-progress-column'

/**
* @cfg {String} progressCls
*/
,progressCls: 'x-progress'
/**
* @cfg {String} progressText
*/
,progressText: '{0} %'

/**
* @private
* @param {Object} config
*/
,constructor: function(config){
var me = this
,cfg = Ext.apply({}, config)
,cls = me.progressCls;

me.callParent([cfg]);

// Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
// class name x-action-col-{n}
me.renderer = function(v, meta) {
var text, newWidth;

newWidth = Math.floor(v * me.getWidth(true)); //me = column

// Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||v : v; //this = renderer scope
text = Ext.String.format(me.progressText,Math.round(v*100));

meta.tdCls += ' ' + cls + ' ' + cls + '-' + me.ui;
v = '<div class="' + cls + '-text ' + cls + '-text-back">' +
'<div>' + text + '</div>' +
'</div>' +
'<div class="' + cls + '-bar" style="width: '+ newWidth + 'px;">' +
'<div class="' + cls + '-text">' +
'<div>' + text + '</div>' +
'</div>' +
'</div>'
return v;
};

}//eof constructor


/**
* @private
*/
,destroy: function() {
delete this.renderer;
return this.callParent(arguments);
}//eof destroy

}); //eo extend

//end of file


CSS:


/* = Progress Column
----------------------------------------------- */
.x-grid-row .x-progress .x-grid-cell-inner {
padding: 0;
}

[Fabyo]

Thanks, I used your example and added a choice of 3 colors red, orange and green

:)

[zombeerose]

Cool - care to share what you did?

[Fabyo]

I'm using numbers from 0 to 100 ok?



me.renderer = function(v, meta) {
var text, newWidth;

newWidth = Math.floor((v/100) * me.getWidth(true));

v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||v : v; //this = renderer scope
text = Ext.String.format(me.progressText, Math.round(v));

meta.tdCls += ' ' + cls + ' ' + cls + '-' + me.ui;

if (v <= 100 && v > 79)
style = 'x-progress-bar-green';
if (v < 78 && v > 35)
style = 'x-progress-bar-orange';
if (v < 34)
style = 'x-progress-bar-red';

v = '<div class="' + cls + '-text ' + cls + '-text-back">' +
'<div>' + text + '</div>' +
'</div>' +
'<div class="' + style + '" style="width: '+ newWidth + 'px;">' +
'<div class="' + cls + '-text">' +
'<div>' + text + '</div>' +
'</div>' +
'</div>'
return v;
};


css:


.x-grid-row .x-progress .x-grid-cell-inner {
padding: 0;
}

.x-progress-default .x-progress-bar-red {
background-color: #FF0000;
background-image: -moz-linear-gradient(center top , #FF0000, #FF6600 50%, #FF6600 51%, #FF0000);
border-right-color: #CC3366;
border-top-color: #CC00CC;
}
.x-progress-bar-red {
border-radius: 0 0 0 0;
border-right: 1px solid;
border-top: 1px solid;
height: 18px;
overflow: hidden;
position: absolute;
width: 0;
}

.x-progress-default .x-progress-bar-orange {
background-color: #FFCC00;
background-image: -moz-linear-gradient(center top , #FFCC00, #FF6600 50%, #FF6600 51%, #FFCC00);
border-right-color: #FFCC00;
border-top-color: #FFCC00;
}
.x-progress-bar-orange {
border-radius: 0 0 0 0;
border-right: 1px solid;
border-top: 1px solid;
height: 18px;
overflow: hidden;
position: absolute;
width: 0;
}

.x-progress-default .x-progress-bar-green {
background-color: #00FF00;
background-image: -moz-linear-gradient(center top , #FFFF00, #00FF00 50%, #33FF99 51%, #00FF00);
border-right-color: #00CC00;
border-top-color: #00CC00;
}
.x-progress-bar-green {
border-radius: 0 0 0 0;
border-right: 1px solid;
border-top: 1px solid;
height: 18px;
overflow: hidden;
position: absolute;
width: 0;
}

example:


columns: [
...

{
text: "Progress",
dataIndex: 'progress',
xtype: 'progresscolumn',
menuDisabled : true,
hideable:false,
resizable:false,
width : 140,
editor: {
xtype:'numberfield',
minValue: 0,
maxValue: 100,
allowBlank: false
}
}

[zombeerose]

Nice :)

[zombeerose]

@Fabyo
I used your ideas for inspiration and integrated something similar into the source. Check out https://github.com/zombeerose/ProgressColumn

[Fabyo]

very good ;)

[HEILEENDURLEY]

Ext.onReady(function () {
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
width: 500,
height: 200,
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone', 'progress'],
data: [
{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224", 'progress': 25 },
{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234", 'progress': 50 },
{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244", 'progress': 75 },
{ 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254", 'progress': 100 }
]
}),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' },
{
header: 'Progress',
dataIndex: 'progress',
width: 110,
renderer: function (v, m, r) {
var id = Ext.id();
Ext.defer(function () {
Ext.widget('progressbar', {
renderTo: id,
value: v / 100,
width: 100
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
}
],
renderTo: 'output'
});
});