1. #21
    Sencha User
    Join Date
    Mar 2010
    Posts
    26
    Vote Rating
    0
    mohan_b is on a distinguished road

      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
    Boxcopter is on a distinguished road

      0  

    Default


    Thanks Animal this is exactly what I need!

    Works like charm!

  3. #23
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    441
    Vote Rating
    7
    wemerson.januario will become famous soon enough

      0  

    Default


    very nice work
    Wemerson Januario
    Twitter:
    @wemersonjanuar
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 9106-6689
    From: Goiânia, Brazil
    Desenvolvedor ExtJS/ ExtJS Developer

  4. #24
    Ext User
    Join Date
    May 2010
    Posts
    4
    Vote Rating
    0
    gijo,mk is on a distinguished road

      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
    Boxcopter is on a distinguished road

      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 - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    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


    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
    gijo,mk is on a distinguished road

      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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What debugging have you done? Any at all?

    ext-all AND ext-all-debug???????

  9. #29
    Ext User
    Join Date
    May 2010
    Posts
    4
    Vote Rating
    0
    gijo,mk is on a distinguished road

      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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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?