Extjs:单元格中的progressBar不显示

问题描述 投票:1回答:2

我正在使用Extjs 4.1

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

这是我的方式:

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");
    }
}
extjs grid progress-bar
2个回答
3
投票

使用扩展延迟

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

0
投票

我正面临着相同的问题'dom'null。你解决了吗?如果您可以共享解决方案,那就太好了...

© www.soinside.com 2019 - 2024. All rights reserved.