HOWTO : ProgressBar Usage with Grid.

[Srinivas B]

Hi All, I am having a Grid .For the grid i implemented a context menu with delete option .when multiple rows are selected to delete i am trying to show progressbar.please look at the code below..


var totalrows= 21;
Ext.MessageBox.show({
title: 'Please wait...',
msg: 'Initializing...',
width:240,
progress:true,
closable:false//,
//animEl: 'mb6'
});
for(var i = 1; i <= totalrows ; i++){
//setTimeout(visuality.util.ProgressTask.updateProgress( i ), i*1000);
Ext.MessageBox.updateProgress( i/totalrows , 'Loading item ' + i + ' of '+ totalrows +'...');
//Here code to delete the grid row..
logDebug('task ' + i );
}
//Ext.MessageBox.hide();

});
but the problem with this code is progress bar is showing after all the rows gets deleted .


Basically i am from java background ,if this is the case in java i will implement this progress task in separate thread and i use Observer Design pattern to change the progress bar status.

I don't know how to do this using Ext.. can any body help me how to show this progress Dialog box in separate thread or separate Task.

In the examples section for progress dialog box used a javascript setTimeout() function,, but i don't have a time to specify in this ... because the deletion of grid row depends on System speed.I am unable to get the unique value to set as in the timer.


Thanks in Advance,
Srinivas

[prophet]

I struggled with this same problem that you're having...
I ended up using Ext.MessageBox.wait (which, in my opinion works very well in Firefox, but very slow in IE7, but what else is new?)

[Srinivas B]

Hi prophet,
Thanks for the reply.. I didn't get any idea about this.can u pls post the peace of code that is working for u.

How u are making the progress bar to update the status?

Thanks in Advance ,
Srinivas.

[phayes]

anybody come up with a fix?

[phayes]

its the form rendering also that has priority thread i reckon, but this seems to work ok.

var el = Ext.get('CustomerGridView');
el.mask('Please Wait...', 'x-mask-loading');

new Ext.util.DelayedTask(function() {
var ds = grid.getDataSource();
ds.each(
function(rec){
rec.set('customerAssign', checked);
}
);
el.unmask();

}).delay(250);