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.

**chriss** · 25 Feb 2010 1:02 AM

I think it would be cooler if the progress bar would use some semi-transparent pgn as a background image( a black to white gradient with some transparency in it ) and a color for background-color. This way you'll have the possibility to choose any color you want for you progress bar, and not stick just to the ones you have a image for. What do you think?

**Animal** · 25 Feb 2010 6:31 AM

Well, that's entirely a matter for your own stylesheet.

Class names are added, do with them what you will.

**Fabyo** · 11 Mar 2010 4:16 AM

Ext.grid.EditorGridPanel

In the editor how to implement the use Ext.Slider ?

Code:

new Ext.ux.ProgressColumn({
    header: '% Change',
    width: 105, 
    dataIndex: 'change',
    divisor: 'price',
    align: 'center',
    editor:  new Ext.Slider({
        width: 150,
        increment: 5,
        keyIncrement: 5,
        value: 11,
        minValue: 0,
        maxValue: 100                                          
    })            
})

Error:
this.field.reset is not a function
[IMG]chrome://firebug/content/blank.gif[/IMG]Ext.DomHelper=function(){var s=null,j=...remoting=Ext.direct.RemotingProvider;

**Animal** · 11 Mar 2010 6:57 AM

Slider is not a Field. Is it? read its inheritance.

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

Thread Tools

Search Thread

Display

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.