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'
});
});