1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    19
    Vote Rating
    0
    sangita.r9 is on a distinguished road

      0  

    Question Unanswered: Progress Bar inside a Grid cell

    Unanswered: Progress Bar inside a Grid cell


    Hi,

    I want to put a progressbar inside a grid. I created a renderer function like this :

    function extjsRenderer(value) {
    var id = Ext.id();

    (function() {
    if (value < 50) {
    var bar = new Ext.ProgressBar({
    height: 15,
    renderTo: id,
    value: (value / 100)
    });
    } else if (value < 75) {
    var btn = new Ext.Button({
    renderTo: id,
    text: 'Price: ' + value
    });
    } else {
    var txt = new Ext.form.TextField({
    value: value,
    renderTo: id,
    height: 15
    });
    }
    });


    return (String.format('<div id="{0}"></div>', id));
    }

    But I am getting the error as "Object does not support the method 'format'". So, I removed String.format,but instead of a progress bar it is showing me ext-gen1031,ext-gen1032,ext-gen1033 inside the grid.

    Can you tell me what is wrong in my code?


    Thanks,
    Sangita

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    19
    Vote Rating
    0
    sangita.r9 is on a distinguished road

      0  

    Default


    Hi,

    I am able to see the progress bar by changing the return statement to

    return '<div role="presentation" class="x-progress x-progress-default" id="progressbar"><div style="height: 20px; width: 35px;" id="progressbar-1022-bar" class="x-progress-bar"><div id="' + id + '" class="x-progress x-progress-default"></div></div></div>';

    But It is a static bar. I have used animate attribute to show the progress as follows :
    animate: {from:{height: 20,width: 0},
    to:{height: 20,width: 30},
    duration: 200}
    But, i am unable to see the progress and its a static bar.
    Is there any other way to achieve this?

    Thanks,
    Sangita

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    19
    Vote Rating
    0
    sangita.r9 is on a distinguished road

      0  

    Default


    Is there any solution?

    Thanks,
    Sangita

  4. #4
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,810
    Vote Rating
    133
    Answers
    33
    mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold mankz is a splendid one to behold

      0  

    Default


    String.format is not a function. Ext.String.format exists though, but it won't help you in your first post. You are trying to render to an element that does not exist. You are making it overcomplicated, just use a TemplateColumn that outputs 2 nested divs and style those using CSS. Very simple problem

  5. #5
    Sencha User
    Join Date
    May 2010
    Location
    Kiev, Ukraine
    Posts
    135
    Vote Rating
    7
    Answers
    14
    khmurach is on a distinguished road

      0  

  6. #6
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,329
    Vote Rating
    212
    Answers
    8
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      0  

    Default


    Nice trick!
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Answers
    13
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    That will leave orphaned ProgressBar instances all over the place after having rendered into the transient cell.

    Use a special renderer which reuses a single instance of ProgressBar, and just gets the correct markup to use in the cell:

    Code:
        var progressRenderer = (function () {
            var b = new Ext.ProgressBar({height: 15});
            return function(progress) {
                b.updateProgress(progress);
                return Ext.DomHelper.markup(b.getRenderTree());
            };
        })();

  8. #8
    Sencha User
    Join Date
    May 2009
    Posts
    136
    Vote Rating
    5
    DiscoBoy is on a distinguished road

      0  

    Default


    Hi Animal,

    thx for this tip. I'm having the same problem that with every new column creation (e.g. when sorting) a new ProgressBar instance is created. Do I understand your code correctly, that I should create the progressBar only once and each time my cell render function is called it just returns the progressBar Markup in the return statement?

    [UPDATE]
    Ok, got it working, but now the PB doesn't size correctly... The 100% it sizes too are of course not the 100% of the grid cell it renders to later!

  9. #9
    Sencha User phamel's Avatar
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    1
    phamel is on a distinguished road

      0  

    Default Excellent solution !

    Excellent solution !


    Thanks too Animal ! After a few tries, it works ! (ExtJS 4.1.3).

    The 'older' solution (
    http://ext4all.com/post/progress-bar-inside-a-grid-cell) worked with ExtJs 4.0.7, but with ExtJS 4.1.3, the rendering of the column generated javascript errors.

    Code:
                    {
                        text     : 'Column Title'
                        width    : 130,
                        sortable : true,
                        dataIndex: 'ColumnDataIndex',
                        renderer: function (v, m, r) {
                            var tmpValue = v / 100;
                            var tmpText = r.data.Data1 + ' / ' +r.data.Data2;
                            var progressRenderer = (function (pValue, pText) {
                                var b = new Ext.ProgressBar();
                                return function(pValue, pText) {
                                    b.updateProgress(pValue, pText, true);
                                    return Ext.DomHelper.markup(b.getRenderTree());
                                };
                            })(tmpValue, tmpText);
                            return progressRenderer(tmpValue, tmpText);
                        }
                    },

    Result in grid :


  10. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    1
    Vote Rating
    0
    oronzo is on a distinguished road

      0  

    Default


    Hi guys,

    I used this code for adding a progressbar in my grid and works fine. But after adding a progressbar inside a grid cell, is it also possible change progressbar's alignment in the cell and the label's alignment inside the progressbar (for example all to right or all to center)? How can I do it? Using this code, I have progressbar (and its label) only aligned to left and I don't know how to change it...

    I hope that problem is clear.If it isn't, please tell me, thank you!!

    again, thanks a lot

    greetings