PDA

View Full Version : how to make a waitmsg during data load ?



king-greg
22 Feb 2010, 8:25 AM
hello
i would like to display a wait message during the construction of my page.
i call a php page to get logon user info et get some data from sql server base.
i want the page disable during the data loading!
is it possible??

i find something about mask, but i dont succeed to link it with data loading...

please ?

sunco
22 Feb 2010, 8:34 AM
You can mask all the body


Ext.getBody().mask("Wait a second...", 'x-mask-loading');

For a Form (the form has it own mask but it doesn't mask the buttons)...



Ext.getCmp("form_id").el.mask("Wat a second...", 'x-mask-loading');

evanc
22 Feb 2010, 9:53 AM
Add listeners to the Ext.Ajax object. http://www.extjs.com/deploy/dev/docs/?class=Ext.Ajax

king-greg
23 Feb 2010, 1:02 AM
the mask only stay time of page construction
but not wait until the request results

i try tu put a listenr on ma jsonstore call like that:

var user = new Ext.data.JsonStore({
url: 'data/ad.php',
fields: ['sal', 'matricule'],
listeners:{
waitMsg:'load'
}
});
user.load({waitMsg:'Chargement'});

it doesnt work

how to put a wait message until i v got the results ?

sunco
23 Feb 2010, 8:51 AM
?

My code just do what you want.. don't understand

rbastic
23 Feb 2010, 9:52 AM
Personally, I like this approach for my application:



var yourApp = {
'showLoading' : function() {
Ext.MessageBox.show({
msg: 'Loading...',
progressText: 'Loading...',
width:300,
wait:true,
waitConfig: {interval:200}
});
},
'hideLoading' : function() {
Ext.MessageBox.hide();
}
};

yourApp.showLoading();
yourStore.load();


and in your store (after you've declared it, obviously):


yourStore.on({
'load': {
fn: function() {
yourApp.hideLoading();
},
scope: this
},
'exception': {
fn: function() {
yourApp.hideLoading();
},
scope: this
}
});


Disclaimer: I'm not an extjs expert and the above sample hasn't been tested. However, I'm using a very very similar version of this in a production application at the moment.

Cheers!

king-greg
24 Feb 2010, 5:16 AM
ok i understand !
it works

but (there is always a BUT)

can i link more than one jsonstore to "yourApp"

i try to make 3 waitmsg at the same time, each one for a datastore...

but it seem to be only one waitmsg... or they all hide at the same time the first hide...

any idea??

danellison
24 Feb 2010, 8:39 AM
Seems like something like this should work:



var progress = new Ext.MessageBox.progress('Loading', 'initializing', 0);
progress.show();

var store1 = new Ext.data.JsonStore({
....
});
var store2 = new Ext.data.JsonStore({
....
});
var store3 = new Ext.data.JsonStore({
....
});
var storen = ({ ... });


store1.on('beforeload', function() {
progress.updateProgress(0.25, 'Loading store1', 'Standby while loading data store');
}
store1.on('load', function() {
progress.updateProgress(0.35, 'Store loaded', this.getCount()+' records loaded into store');
// load stores syncronously
store2.load();
});
store2.on('beforeload', function() {
progress.updateProgress(0.5, 'Loading store 2', 'whatever message you want here');
}
store2.on('load', function() {
progress.updateProgress(0.6, 'Store loaded', this.getCount()+' records loaded');
// load stores syncronously
store3.load()
}
...
storen.on('load', function() {
// do whatever you need to do now that stores are loaded
// then close the progress window
progress.close();
mainAppRoutinecall();
});

store1.load(); // get it all started


Work for you?
Dan

king-greg
25 Feb 2010, 7:23 AM
var progress = new Ext.MessageBox.progress('Loading', 'initializing', 0);

doesn't works

MessageBox is not a constructor

fay
25 Feb 2010, 7:53 AM
From the docs (http://www.extjs.com/deploy/dev/docs/?class=Ext.MessageBox):


This class is a singleton and cannot be created directly.

There are examples of how to use Ext.MessageBox in the \examples\message-box folder!

king-greg
25 Feb 2010, 8:47 AM
i m completely lost ...

i v got :

opt is undefined
anonymous()ext-all-debug.js (ligne 24508)
anonymous()elements.js (ligne 105)
anonymous()ext-all-debug.js (ligne 1577)
anonymous()ext-all-debug.js (ligne 1324)
anonymous("read", Object name=rs, Object params=Object, Object name=batch)ext-all-debug.js (ligne 20048)
anonymous(Object params=Object)ext-all-debug.js (ligne 19983)
anonymous()cartons5.html (ligne 213)
anonymous()ext-all-debug.js (ligne 1253)


chrome://firebug/content/blank.gif var d = this.getDialog(opt.title || " ");\n


...........

fay
25 Feb 2010, 10:00 AM
To load 3 stores with a progress bar:


// Create your stores.
var store1 = new Ext.data.JsonStore({
// ...
});
var store2 = new Ext.data.JsonStore({
// ...
});
var store3 = new Ext.data.JsonStore({
// ...
});

// Add event handlers to cater for updating the progress (and to catch any problems)
store1.on('load', function(store, records, options)
{
Ext.MessageBox.updateProgress(0.33, 'Store 1 loaded');
store2.load(); // "synchronous" loading
});
store1.on('loadexception', function(){ Ext.MessageBox.hide(); });

store2.on('load', function(store, records, options)
{
Ext.MessageBox.updateProgress(0.66, 'Store 2 loaded');
store3.load(); // // "synchronous" loading
});
store2.on('loadexception', function(){ Ext.MessageBox.hide(); });

store3.on('load', function(store, records, options)
{
Ext.MessageBox.updateProgress(100, 'Store 3 loaded');
Ext.MessageBox.hide();
});
store3.on('loadexception', function(){ Ext.MessageBox.hide(); });

// START!
Ext.MessageBox.progress('Loading', 'Loading data...');
store1.load();

danellison
25 Feb 2010, 12:06 PM
var progress = new Ext.MessageBox.progress('Loading', 'initializing', 0);

doesn't works

MessageBox is not a constructor

My bad. Remove the "new" keyword from the statement. That's what happens when you contribute off the top of your head. BTW, you probably DO want to trap the exception event as well so you can dispose of the messagebox or whatever on error.

The rest of the logic should be close B)

Dan

danellison
25 Feb 2010, 12:51 PM
i m completely lost ...

i v got :

opt is undefined
anonymous()ext-all-debug.js (ligne 24508)
anonymous()elements.js (ligne 105)
anonymous()ext-all-debug.js (ligne 1577)
anonymous()ext-all-debug.js (ligne 1324)
anonymous("read", Object name=rs, Object params=Object, Object name=batch)ext-all-debug.js (ligne 20048)
anonymous(Object params=Object)ext-all-debug.js (ligne 19983)
anonymous()cartons5.html (ligne 213)
anonymous()ext-all-debug.js (ligne 1253)


chrome://firebug/content/blank.gif var d = this.getDialog(opt.title || " ");\n


...........

Almost has to be a syntax error you have introduced accidentally.

Dan

king-greg
26 Feb 2010, 12:57 AM
the thing is i ve put all my cariables en objects in a js script an all my functions in another js sript and i call all that in my htlm page

in the html page i can call a messagebox like you did, but if i create it in y js script file it makes the syntax error...

danellison
26 Feb 2010, 7:03 AM
the thing is i ve put all my cariables en objects in a js script an all my functions in another js sript and i call all that in my htlm page

"Syntax error" doesn't really tell me anything. I am assuming that the error is that the progress window is undefined....

In the html page i can call a messagebox like you did, but if i create it in y js script file it makes the syntax error...

define the variable in the html page in your namespace scope (or global if not using namespace) and asign its value in your js file. That should make the progress window global to your application.

Dan