Question

我正在使用Extjs 4.1

在我的应用程序中，我正在显示一个带有一些actionColumns的网格，当通过这些actioncolumns启动任务时，我想在网格中显示一个进度条。网格中的每条记录都应该有一个进度条。

我是怎么做到的：

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;
        }
      } 

   }],

正确创建进度条（进度条的代码正在运行，请参见下文），但不会显示/呈现。

我的代码出错了吗？

这是自定义进度条的代码：

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");
    }
}

Answer 1

使用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>";
                },

Extjs：不显示单元格网格中的progressBar

1 个答案: