how to show a wait message while calling store load

[louiseburg]

Hi all,

i have an Ext.data.Store object and i am calling "load()" function manually.

How can i show a wait message while load operation running


var myDataStore = new Ext.data.Store(){....} ;

myDataStore.load(); --> at this time i want to show a wait message on page.

[koko2589]

function showProgress(){
Ext.MessageBox.show({
msg: 'Saving your data, please wait...',
progressText: 'Saving...',
width:300,
wait:true,
waitConfig: {interval:200}, icon:'ext-mb-download'

[louiseburg]

i could not get how to show the message.

when and how should i call the showProgress function?

(the message on the screen must disappear automatically.)

[louiseburg]

is not there a solution for that if i use "load"?

[Animal]

Use one of there?

http://extjs.com/deploy/dev/docs/?class=Ext.LoadMask

[PCSpectra]

Use one of there?

http://extjs.com/deploy/dev/docs/?class=Ext.LoadMask

That shows us WHAT classes or objects to use but what about where? If I specify the URI on a data store and it autoLoad is true, do I hook into that data store using a listener? If so, which one?

Cheers,
Alex

[antonye]

Just for completeness in this thread (and to help people searching, like me!) I will explain it a little more!

You first need to create your Ext.LoadMask object. This will contain the message msg: you wish to display.
If you are using a Store, you can specify the store: that you want to bind the LoadMask to, and everything then happens automagically.

 
var dataDef = Ext.data.Record.create([{

name
:'id'

},{

name
:'item_value',

mapping
:'item.price'

}]);

 
var readerData =new Ext.data.JsonReader({

idProperty
:'id',

root
:'results'

}, dataDef);


var storeData =new Ext.data.Store({

nocache
:true,

reader
: readerData,

autoLoad
:false,


remoteSort
:false,

proxy
:new Ext.data.HttpProxy({

url
:'http://server/dir/file',

method:
'POST'

}),

listeners
:{

load
:function(self, records, options){

doSomething(
self.getAt(0).get('item_value'));

},

exception
:function(self, type, action, request, response){

Ext
.Msg.alert('Load Error!','ooops!');

}

}

});


// loading mask for this Store

var mask =new Ext.LoadMask(Ext.getBody(),{msg:'Loading data...', store: storeData});

You can see that we create a data definition first "dataDef" which is used to define the structure of the data received by the JSONReader "readerData".

Then we create a Store "storeData" to hold this data in, and give it the Reader "readerData" so it knows how to interpret the data it receives. I've added in a Load and Exception event, just to give a more complete example.

Finally, we create our LoadMask "mask" and as part of the parameters we can bind it to the store: storeData.

Now when the store is loading, it will automatically display the LoadingMask.

HTH!