1. #1
    Ext User
    Join Date
    Mar 2009
    Posts
    14
    Vote Rating
    0
    louiseburg is on a distinguished road

      0  

    Default how to show a wait message while calling store load

    how to show a wait message while calling store load


    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.

  2. #2
    Sencha User
    Join Date
    Mar 2009
    Posts
    356
    Vote Rating
    0
    koko2589 is on a distinguished road

      0  

    Default


    function showProgress(){
    Ext.MessageBox.show({
    msg: 'Saving your data, please wait...',
    progressText: 'Saving...',
    width:300,
    wait:true,
    waitConfig: {interval:200}, icon:'ext-mb-download'
    my ext js site
    http://www.itoto4.com/

  3. #3
    Ext User
    Join Date
    Mar 2009
    Posts
    14
    Vote Rating
    0
    louiseburg is on a distinguished road

      0  

    Default


    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.)

  4. #4
    Ext User
    Join Date
    Mar 2009
    Posts
    14
    Vote Rating
    0
    louiseburg is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

  6. #6
    Sencha User
    Join Date
    Nov 2009
    Posts
    127
    Vote Rating
    0
    PCSpectra is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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

  7. #7
    Ext JS Premium Member antonye's Avatar
    Join Date
    May 2010
    Location
    London, UK
    Posts
    27
    Vote Rating
    0
    antonye is on a distinguished road

      0  

    Default


    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.

    Code:
     
    
    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!