CODEWITHSUNDEEP
extjsgridprogress-bar
Ben
Ben

Reputation: 147

Extjs: progressBar in cell grid not displaying

I'm using Extjs 4.1

In my application, i'm displaying a grid with some actionColumns, when a task is launched through those actioncolumns, i want to display a progress bar in the grid. There should be a progress bar for each record in the grid.

This how I had it:

columns: [{...}
      {
        header:'In Progress',
        dataIndex   : 'inProgress',
        flex: 1,
        renderer: function(value, meta, record){
        if (value){
           var id = Ext.id();
           Ext.defer(function(){
             var pBar=Ext.widget('ProgressBar',{
                renderTo: id,
                rec: record,
             });
           },150);
           return Ext.String.format('<div id="{0}"></div>', id);
        }else{
           return value;
        }
      } 

   }],

The progress bar is correctly created (the code of the progress bar is running, see below) but it is not displayed/rendered.

Any idea as where my code is wrong?

here is the code of the custom progressbar:

Ext.define('V_ProgressBar', {
extend: 'Ext.ProgressBar',
alias: 'widget.ProgressBar',
height: 50,

layout:'fit',

constructor:function(param){
    var rec=param.rec;
    barConfig = this.config;

    value=0.5
    this.value=value;

    this.callParent([barConfig]);

    this.update(this, value);
},


update:function(pbar, value){
    console.log(pbar.value)
    if (value<1){
        console.log(value)
        value+=0.1;
        pbar.updateProgress(value);
        Ext.Function.defer(pbar.update, 3000, this, [pbar,value]);
    }
    else{
        pbar.updateText("done");
    }
}

Upvotes: 1

Views: 2162

Answers (1)

mrjgeek
mrjgeek

Reputation: 46

Use Ext.defer

                header: "Porcentual Concluído",
                flex:0.3,
                dataIndex: 'porcentualtotal',
                renderer: function(value, meta, record){
                    if(record.data.porcentualtotal == null){
                        record.data.porcentualtotal = 0;
                    }                
                    pt = record.data.porcentualtotal/100;

                    var id = Ext.id();
                    Ext.defer(function (id,pt) {
                        var p = Ext.create('Ext.ProgressBar',{
                            renderTo: id,
                            animate: true,
                            width: '100%',
                            value: pt,
                            text: (pt*100)+"%",
                        });                        
                    }, 50, undefined, [id,pt]);
                    return "<div id='" + id + "'></div>";
                },

Upvotes: 3

Related Questions