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
    431
    Vote Rating
    6
    wemerson.januario is on a distinguished road

      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
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    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,499
    Vote Rating
    47
    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,499
    Vote Rating
    47
    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?

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi