Page 3 of 4 FirstFirst 1234 LastLast
Results 21 to 30 of 39

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

  1. #21
    Sencha User
    Join Date
    Mar 2010
    Posts
    26
    Vote Rating
    0
      0  

    Default

    Hi Animal,

    Thank you very much for this great plugin.

    I can vouch and verify that this plugin can be used with Livegrid without a hitch, if someone faces an issue, let me know.

    Btw, can this plugin be ported as a column for TreeGrid(which is inherited from a TreePanel)?
    If yes, please let me know how do I go about doing it, I will post the code here for others to use.

    Thanks once again
    Mohan_b

  2. #22
    Ext User
    Join Date
    Feb 2010
    Location
    Charlottesville, VA, USA
    Posts
    33
    Vote Rating
    0
      0  

    Default

    Thanks Animal this is exactly what I need!

    Works like charm!

  3. #23
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    743
    Vote Rating
    57
      0  

    Default

    very nice work
    Wemerson Januario
    Blog: http://wemersonjanuario.com.br
    Contrate-me/Hire me on: https://www.upwork.com/fl/wemersonjanuario
    From: Goiânia, GO, Brazil
    Sencha Consultant and Web Developer

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  4. #24
    Ext User
    Join Date
    May 2010
    Posts
    4
    Vote Rating
    0
      0  

    Default

    When i am using this progress column, i am getting two js error and not displaying any progress bar

    1)Error: sp is undefined
    Source File: file:///root/ext-2.2.1/adapter/ext/ext-base.js

    2)Error: Ext.data.ArrayStore is not a constructor
    Source File: file:///root/ext-2.2.1/examples/grid/Test.html

    when i change ArrayStore to SimpleStore 2nd error comes as

    Error: Ext.ux.ProgressColumn is not a constructor
    Source File: file:///root/ext-2.2.1/examples/grid/Test.html

    Test.html contains the above code
    pls help me

  5. #25
    Ext User
    Join Date
    Feb 2010
    Location
    Charlottesville, VA, USA
    Posts
    33
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by gijo,mk View Post
    When i am using this progress column, i am getting two js error and not displaying any progress bar

    1)Error: sp is undefined
    Source File: file:///root/ext-2.2.1/adapter/ext/ext-base.js

    2)Error: Ext.data.ArrayStore is not a constructor
    Source File: file:///root/ext-2.2.1/examples/grid/Test.html

    when i change ArrayStore to SimpleStore 2nd error comes as

    Error: Ext.ux.ProgressColumn is not a constructor
    Source File: file:///root/ext-2.2.1/examples/grid/Test.html

    Test.html contains the above code
    pls help me
    Use ext-all-debug.js and also, when you get a "is not a constructor" error, it is when you are using a wrong xtype usually. Do that. sp is undefined is a little vague, but usually when you try to reference something before you actually render it to the page.

    Please post code instead of filenames. It doesn't help.

  6. #26
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    86
      0  

    Default

    Quote Originally Posted by gijo,mk View Post
    When i am using this progress column, i am getting two js error and not displaying any progress bar

    1)Error: sp is undefined
    Source File: file:///root/ext-2.2.1/adapter/ext/ext-base.js

    2)Error: Ext.data.ArrayStore is not a constructor
    Source File: file:///root/ext-2.2.1/examples/grid/Test.html

    when i change ArrayStore to SimpleStore 2nd error comes as

    Error: Ext.ux.ProgressColumn is not a constructor
    Source File: file:///root/ext-2.2.1/examples/grid/Test.html

    Test.html contains the above code
    pls help me
    Why are you developing without a web server?

  7. #27
    Ext User
    Join Date
    May 2010
    Posts
    4
    Vote Rating
    0
      0  

    Default

    I have put this in apache server.
    Also I have moved the ProgressColumn.js to Test.html and the Error: Ext.ux.ProgressColumn is not a constructor has gone

    But still following error is happening
    Error: sp is undefined
    Source File: http://192.168.1.106/ext-2.2.1/adapter/ext/ext-base.js

    is there any difference b/w running extjs using a server or without a server?
    HTML Code:
    <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="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(images/progress-bg-red.gif) 0 -33px; 
            } 
     
            .x-grid3-td-progress-cell .medium { 
                background: transparent url(images/progress-bg-orange.gif) 0 -33px; 
            } 
     
            .x-grid3-td-progress-cell .low { 
                background: transparent url(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>
        <script type="text/javascript" src="../../ext-all-debug.js"></script> 
     
        <!-- overrides to base library --> 
     
     
        <!-- page specific --> 
    <script type="text/javascript">
    
    
    
    Ext.ux.ProgressColumn = Ext.extend(Ext.grid.Column, { 
        /** 
         * @cfg {String} align Optional. Set the CSS text-align property of the column.  Defaults to 'left'. 
         */ 
        /** 
         * @cfg {String} divisor Optional. The name of a Field by which to divide this column's value to yield the proportional width of the filled bar. 
         */ 
        /** 
         * @cfg {String} dividend Optional. The name of a Field to divide by this column's value to yield the proportional width of the filled bar. 
         */ 
     
        tpl: new Ext.XTemplate( 
            '<tpl if="align == \'left\'">', 
                '<div class="ux-progress-cell-inner ux-progress-cell-inner-{align} ux-progress-cell-background">', 
                    '<div>{value}</div>', 
                '</div>', 
                '<div class="ux-progress-cell-inner ux-progress-cell-inner-{align} ux-progress-cell-foreground {cls}" style="width:{pct}%" ext:qtip="{qtip}">', 
                    '<div ext:qtip="{qtip}">{value}</div>', 
                '</div>', 
            '</tpl>', 
            '<tpl if="align != \'left\'">', 
                '<div class="ux-progress-cell-inner ux-progress-cell-inner-{align} ux-progress-cell-foreground {cls}" ext:qtip="{qtip}">', 
                    '<div ext:qtip="{qtip}">{value}</div>', 
                '</div>', 
                '<div class="ux-progress-cell-inner ux-progress-cell-inner-{align} ux-progress-cell-background" style="left:{pct}%">', 
                    '<div style="left:-{pct}%">{value}</div>', 
                '</div>', 
            '</tpl>' 
        ), 
     
        constructor: function(config) { 
            if (config.renderer) { 
                this.baseRenderer = config.renderer; 
                config = Ext.apply({}, config); 
                delete config.renderer; 
            } 
            Ext.grid.Column.call(this, config); 
            this.renderer = Ext.ux.ProgressColumn.prototype.renderer.createDelegate(this); 
        }, 
     
        /** 
         * This function returns a class name to add to the filled section of the bar which may then be used 
         * to provide different appearances depending upon the fraction the cell represents. The default 
         * implementation which may be overridden returns:<ul> 
         * <li>'high' if fraction > 0.98</li> 
         * <li>'medium' if fraction > 0.75</li> 
         * <li>'low' otherwise</li> 
         * </ul> 
         * @param {Number} fraction The fraction represented by this Column. 
         */ 
        getBarClass: function(fraction) { 
            return (fraction > 0.98) ? 'high' : (fraction > 0.75) ? 'medium' : 'low'; 
        }, 
     
        /** 
         * <p>This function returns the proportion to render as the filled section of the bar as a floating 
         * point value between zero and one.</p> 
         * <p>The provided implementation either divides this Column's value by a configured {@link @divisor} 
         * or divides a configured {@dividend} by this Column's value. A custom implementation may be injected 
         * as a configuration option.</p> 
         * This function is called with the following parameters:<ul> 
         * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li> 
         * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul> 
         * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li> 
         * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell 
         * (e.g. 'style="color:red;"').</p></li></ul></p></li> 
         * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was extracted.</p></li> 
         * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li> 
         * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li> 
         * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record was extracted.</p></li></ul> 
         * @return {Number} The fraction represented by this Column. 
         */ 
        getFraction: function(value, meta, record, rowIndex, colIndex, store) { 
           var fraction = 0; 
            if (record) { 
                if (this.dividend) { 
                    fraction = record.get(this.dividend) / value; 
                } else if (this.divisor) { 
                    fraction = value / record.get(this.divisor); 
                } 
                if (fraction < 0) { 
                    fraction = 0; 
                } else if (fraction > 1) { 
                    fraction = 1; 
                } 
            } 
            return fraction; 
        }, 
     
        /** 
         * <p>This function returns a string to use as the tooltip when hovering over the filled bar.</p> 
         * <p>The provided implementation displays the proportion as a percentage value rounded to two decimal places. 
         * A custom implementation may be injected as a configuration option.</p> 
         * This function is called with the following parameters:<ul> 
         * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li> 
         * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul> 
         * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li> 
         * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell 
         * (e.g. 'style="color:red;"').</p></li></ul></p></li> 
         * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was extracted.</p></li> 
         * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li> 
         * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li> 
         * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record was extracted.</p></li></ul> 
         * <li><b>pct</b> : Number<p class="sub-desc">The calculated percentage.</p></li></ul> 
         * @return {String} The message to display as a tooltip when hovering over the filled bar. 
         */ 
        getQtip: function(value, meta, record, rowIndex, colIndex, store, pct) { 
            return Ext.util.Format.number(pct, "0.00%"); 
        }, 
     
        // private 
        baseRenderer: function(v) { 
            return v; 
        }, 
     
        // private 
        renderer: function(value, meta, record, rowIndex, colIndex, store) { 
            var fraction = this.getFraction.apply(this, arguments), 
                pct = fraction * 100, 
                displayVal; 
     
            Array.prototype.push.call(arguments, pct); 
            displayVal = this.baseRenderer.apply(this, arguments); 
            if (record) { 
                meta.css += ' x-grid3-td-progress-cell'; 
                return this.tpl.apply({ 
                    align: this.align || 'left', 
                    value: displayVal, 
                    pct: fraction * 100, 
                    qtip: this.getQtip.apply(this, arguments), 
                    cls: this.getBarClass(fraction) 
                }); 
            } else { 
                return displayVal; 
            } 
        } 
    });
    
    
    
     
    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.SimpleStore({ 
            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> 
    Last edited by gijo,mk; 19 May 2010 at 3:59 AM. Reason: added code

  8. #28
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,758
    Vote Rating
    83
      0  

    Default

    What debugging have you done? Any at all?

    ext-all AND ext-all-debug???????
    Longtime Sencha engineer. Now surplus to requirements apparently...

  9. #29
    Ext User
    Join Date
    May 2010
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Hi

    Sorry for that..
    But the error doesn't have anything to do with ext-all.js, right?

    For me, even the following code with
    Ext.ux.ProgressColumn = Ext.extend(Ext.grid.Column, { });
    alone in the header gives the same error

    Error: sp is undefined
    Source File: http://192.168.1.106/ext-2.2.1/adapter/ext/ext-base.js
    Line: 9

    what could be the problem??

    HTML Code:
     
    <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="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(images/progress-bg-red.gif) 0 -33px; 
            } 
     
            .x-grid3-td-progress-cell .medium { 
                background: transparent url(images/progress-bg-orange.gif) 0 -33px; 
            } 
     
            .x-grid3-td-progress-cell .low { 
                background: transparent url(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-debug.js"></script> 
     
        <!-- overrides to base library --> 
     
     
        <!-- page specific --> 
    <script type="text/javascript">
    
    Ext.ux.ProgressColumn = Ext.extend(Ext.grid.Column, { 
         
    }); 
    
    </script> 
    </head> 
    <body> 
    <h1>Progress Column Grid Example</h1> 
    <div id="grid-example"></div> 
    </body> 
    thanks..

  10. #30
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,758
    Vote Rating
    83
      0  

    Default

    And?

    Is this how you create apps?

    See an error, throw your hands up and get "teh interwebs" to do your debugging?

    Again, what debugging have you done?
    Longtime Sencha engineer. Now surplus to requirements apparently...

Page 3 of 4 FirstFirst 1234 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •