Javascript extjs 3.4在它之前获取progressbar html表示形式';呈现
我想知道在progressbar被渲染到任何地方之前,是否有任何方法可以获得它的html表示形式 我需要在网格中渲染progressbar。目前,我在进度列中使用自定义渲染器:Javascript extjs 3.4在它之前获取progressbar html表示形式';呈现,javascript,extjs,progress-bar,Javascript,Extjs,Progress Bar,我想知道在progressbar被渲染到任何地方之前,是否有任何方法可以获得它的html表示形式 我需要在网格中渲染progressbar。目前,我在进度列中使用自定义渲染器: renderer: function( value, metaData, record, rowIndex, colIndex, store ) { var id = Ext.id(); (function(){ va
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>';
}
其中
htmlRepresentationFunction()
是返回html表示的函数(从其名称可以明显看出)。然后在自定义渲染器中使用generateRenderer()
函数。到目前为止,我已经这样重写了代码:
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 || ' ',
textBack: textBack || ' '
})
}
})()
所以我不需要动画,但我仍然希望有比这更优雅的方式
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 || ' ',
textBack: textBack || ' '
})
}
})()
renderer: function( value, metaData, record, rowIndex, colIndex, store ) {
var value = progress_value;
return this.progressBarHtmlGenerator(value);
}.createDelegate(this)