Ext.ux.ProgressColumn - a Column subclass to display progress bars in grid cells.

**Animal** · 15 Sep 2009 1:00 PM

Unzip the attached archive into examples/ux

ProgressColumn.zip

There is a class file, and a CSS file (Obviously you will want to edit the CSS to create your own appearance as demonstrated in the source below which uses images as backgrounds).

The code is fully commented with JSDoc style comments.

Then drop this example page into examples/grid to get an idea:

Code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Progress Column Grid Example</title>

    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../ux/ProgressColumn.css" />

    <!-- overrides to base library -->

    <!-- page specific -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    <link rel="stylesheet" type="text/css" href="grid-examples.css" />

    <style type=text/css>
        .x-grid3-td-progress-cell .x-grid3-cell-inner {
            font-weight: bold;
        }

        .x-grid3-td-progress-cell .high {
            background: transparent url(../ux/images/progress-bg-red.gif) 0 -33px;
        }

        .x-grid3-td-progress-cell .medium {
            background: transparent url(../ux/images/progress-bg-orange.gif) 0 -33px;
        }

        .x-grid3-td-progress-cell .low {
            background: transparent url(../ux/images/progress-bg-green.gif) 0 -33px;
        }
        
        .x-grid3-td-progress-cell .ux-progress-cell-foreground {
            color: #fff;
        }
    </style>

    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="../../ext-all.js"></script>

    <!-- overrides to base library -->
    <script type="text/javascript" src="../ux/ProgressColumn.js"></script>

    <!-- page specific -->
<script type="text/javascript">
Ext.onReady(function(){

    Ext.QuickTips.init();

    // sample static data for the store
    var myData = [
        ['3m Co',71.72,70.64,'9/1 12:00am'],
        ['Alcoa Inc',29.01,24.5,'9/1 12:00am'],
        ['Altria Group Inc',83.81,42.1,'9/1 12:00am']
    ];

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            new Ext.ux.ProgressColumn({
                header: '% Change',
                width: 105, 
                dataIndex: 'change',
                divisor: 'price',
                align: 'center',
                renderer: function(value, meta, record, rowIndex, colIndex, store, pct) {
                    return Ext.util.Format.number(pct, "0.00%");
                }
            }),
            {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Array Grid',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'        
    });
    
    // render the grid to the specified div in the page
    grid.render('grid-example');
});
</script>
</head>
<body>
<h1>Progress Column Grid Example</h1>
<div id="grid-example"></div>
</body>
</html>

**Animal** · 15 Sep 2009 11:41 PM

And obviously, you can use background images and different text colours on the classes returned by the getBarClass method:

**jay@moduscreate.com** · 16 Sep 2009 2:34 AM

Friggin sharp dude!

**mask_hot** · 24 Feb 2010 2:25 AM

Hi Nigel,

I don't have the progress bar well displayed.
I set no divisor nor dividend as my value is the progress status. So I thought I had to set the divisor to 100 but with no success.

Any idea?

**mask_hot** · 24 Feb 2010 2:41 AM

Originally Posted by mask_hot

Hi Nigel,

I don't have the progress bar well displayed.
I set no divisor nor dividend as my value is the progress status. So I thought I had to set the divisor to 100 but with no success.

Any idea?

I did that to solve my issue :

Code:

 if (this.dividend) {
                fraction = record.get(this.dividend) / value;
            } else if (this.divisor) {
                fraction = value / record.get(this.divisor);
            } 

else{
            	fraction = value /100;
            }

**Animal** · 24 Feb 2010 6:55 AM

You can just configure it with your own getFraction method.

**supercharge2** · 24 Mar 2010 11:03 AM

Thank you animal for this useful extension. This really spiced up a page my sales team uses to track their sales progress. Now at a glance they can see where they are at which saves time and money. I appreciate your contributions!

Ext.ux.ProgressColumn - a Column subclass to display progress bars in grid cells.

Thread Tools

Search Thread

Display

Hybrid View

Ext.ux.ProgressColumn - a Column subclass to display progress bars in grid cells.

Ext.ux.ProgressColumn - a Column subclass to display progress bars in grid cells.

Thank you

Thank you