0

どこかにレンダリングされる前にプログレスバーの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()、カスタムレンダラーで関数を使用します。

4

1 に答える 1

2

今のところ、私はこのようにコードを書き直しました：

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)

アニメーションは必要ないので機能しますが、それでもこれよりもはるかにエレガントな方法があることを願っています。

于 2012-12-18T10:24:06.067 に答える