javascript - extjs 3.4 在渲染之前获取进度条 html 表示

Question

我想知道是否有任何方法可以在进度条渲染到任何地方之前获取进度条的 html 表示形式？

我需要在网格中渲染进度条。至于现在，我使用自定义渲染器来显示进度列:

renderer: function( value, metaData, record, rowIndex, colIndex, store ) {
                var id = Ext.id();
                (function(){
                    var progress = new Ext.ProgressBar({
                        renderTo: id,
                        value: progress_value
                    });
                }).defer(50);
                return '<div id="'+ id + '"></div>';
            }

但它看起来不太用户友好，因为进度条是在网格渲染之后渲染的。

我认为可以使用此功能创建自定义进度条，因为人们可以看到渲染为 html 的模板源代码，但我认为它不是那么优雅。

我认为最好的事情就是创建这样的函数:

var generateRenderer = (function(){
        var pb = new Ext.ProgressBar();
        return function( progress_value ){
            pb.updateValue( progress_value );
            return pb.htmlRepresentationFunction();
        }
    })();

其中 htmlRepresentationFunction() 是返回 html 表示的函数(从其名称可以明显看出)。然后在自定义渲染器中使用generateRenderer()函数。

Answer 1

目前我已经这样重写了代码:

progressBarHtmlGenerator: (function(){
    var width = progress_width,
        cls = 'x-progress', // it's default class from ext.js
        tpl = new Ext.Template( // this template is from ProgressBar.js in ext.js
            '<div class="{cls}-wrap">',
                '<div class="{cls}-inner">',
                    '<div class="{cls}-bar" style="width: {barWidth}px">',
                        '<div class="{cls}-text">',
                            '<div>{text}</div>',
                        '</div>',
                    '</div>',
                    '<div class="{cls}-text {cls}-text-back">',
                        '<div>{textBack}</div>',
                    '</div>',
                '</div>',
            '</div>'
        );
    return function(value, text, textBack){
        return tpl.apply({
            cls: cls,
            barWidth: value*width || 0,
            text: text || '&#160;',
            textBack: textBack || '&#160;'
        })
    }
})()

此模板来自 ProgressBar.js。然后我在自定义渲染器中使用这个函数，如下所示:

renderer: function( value, metaData, record, rowIndex, colIndex, store ) {
                var value = progress_value;
                return this.progressBarHtmlGenerator(value);
            }.createDelegate(this)

因为我不需要动画，所以它可以工作，但我仍然希望有某种比这更优雅的方式。