PDA

View Full Version : Progress bar renderer in grid column causing errors



xjscrafter
16 Dec 2013, 12:45 PM
47246

I have a progress bar in a grid column, and intermittently get about 54 errors. It might be related to the var id = Ext.id() below.

Any ideas?


}, {
text: 'Status',
dataIndex: 'percentcomplete',
width: 300,
sortable: true,
renderer: function (v, m, r) {
var id = Ext.id();
Ext.defer(function () {
Ext.widget('progressbar', {
renderTo: id,
value: v / 100,
width: 100,
ui: 'blue-progress',
text: v + "%",
listeners: {
update: function(progBar, value, text, eOpts) {
progBar.updateProgress(v/100, v + '%')
}
}
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
}, {




The errors occur on ext-all-dev.js line 22757:


doInsert: function(el, o, returnElement, pos, sibling, append) {

el = el.dom || Ext.getDom(el);

scottmartin
16 Dec 2013, 8:52 PM
You can use this instead:

288

xjscrafter
16 Dec 2013, 10:06 PM
Your solution works pretty good. Thanks very much!

I wanted to use a ui config for styling, as we purchased the Codaxy basic theme. Right now I have it styled with css.

Also I need to display centered text with value + %. Any ideas?

xjscrafter
16 Dec 2013, 10:19 PM
This gives me the text. Still don't know how to set styling via a ui config.


return '<div class="x-progress x-progress-default" style="height: 15px;"><div class="x-progress-bar x-progress-bar-default" style="width: ' + value + '%"><div style="width: 100%;color: #ffffff;padding-left: 40px;">' + value + '%</div></div></div>';