Hybrid View

  1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default 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.


    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>

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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


  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Friggin sharp dude!

  4. #4
    Sencha User
    Join Date
    Dec 2007
    Location
    Aubagne, France
    Posts
    347
    Vote Rating
    1
    mask_hot is on a distinguished road

      0  

    Default


    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?

  5. #5
    Sencha User
    Join Date
    Dec 2007
    Location
    Aubagne, France
    Posts
    347
    Vote Rating
    1
    mask_hot is on a distinguished road

      0  

    Default


    Quote Originally Posted by mask_hot View Post
    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;
                }

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You can just configure it with your own getFraction method.

  7. #7
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    36
    Vote Rating
    0
    supercharge2 is on a distinguished road

      0  

    Default Thank you

    Thank you


    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!