Results 1 to 5 of 5

Thread: How to mask a form while my stores are loading?

  1. #1
    Sencha User Carlos Souza's Avatar
    Join Date
    May 2015
    Location
    Minas Gerais, Brazil.
    Posts
    29
    Answers
    1

    Default Answered: How to mask a form while my stores are loading?

    Hello everyone.

    I have a form with two comboboxes and two stores. How to mask the form during the loading of stores and unmask after loading them? With Extjs 3 I used a plugin called "StoreGroup", in which it was possible to do this...

    Thanks in advance.

  2. What is store2 loads before store1. How about the following:

    Code:
    afterrender: function() {
    
    
        var win = this;
        win.mask('Please wait...');
    
    
        //array of my stores
        var myStores = [this.store1, this.store2];
    
    
        //function that goes through all stores and checks if all are laoded
        var checkLoadFn = function(store, records, successful, eOpts) {
            var allLoaded = true;
            for (var i = 0; i < myStores.length; i++) {
                if (myStores[i].isLoading()) {
                    allLoaded = false;
                    break;
                }
            }
    
    
            if (allLoaded) {
                win.unmask();
            }
        }
    
    
        //attach the fn to all stores
        for (var j = 0; j < myStores.length; j++) {
            myStores[i].addListener('load', checkLoadFn);
        }
    }

  3. #2
    Sencha User
    Join Date
    Sep 2015
    Posts
    10
    Answers
    1

    Default

    Code:
    var aggSuccess = function(){
         win.unmask();
    };
    
    var aggFailure= function(){
         win.unmask();
    };
    
    
    win.mask('Working...');
    Ext.Ajax.request({
        url : url,
        method : 'POST',
        params : params,
        success : aggSuccess,
        failure : aggFailure
    });
    You can do something similar to the beforeload and load events in the stores behind your controls

  4. #3
    Sencha User Carlos Souza's Avatar
    Join Date
    May 2015
    Location
    Minas Gerais, Brazil.
    Posts
    29
    Answers
    1

    Default

    Quote Originally Posted by jamesgil View Post
    Code:
    var aggSuccess = function(){
         win.unmask();
    };
    
    var aggFailure= function(){
         win.unmask();
    };
    
    
    win.mask('Working...');
    Ext.Ajax.request({
        url : url,
        method : 'POST',
        params : params,
        success : aggSuccess,
        failure : aggFailure
    });
    You can do something similar to the beforeload and load events in the stores behind your controls

    Hi, jamesgil.


    The problem is that every store loads in a given time, so the suggested solution is not ideal... But thanks for the reply!
    The problem was solved as follows:

    Code:
    afterrender: function () { 
      
        var win= this;
    
        var store1 = this.store1; //Getting store1
        var store2= this.store2; //Getting store 2
    
        win.mask('Please wait...');    
    
        store1.on('load', function(){
            store2.on('load', function(){
                win.unmask();
            })
        })
    }
    In this case, after the loading of "store1", it will be checked whether the "store2" also was loaded. Thus, for "N" stores, the form will only be unmasked after all the stores loaded.

    I think that's the solution... But I believe that in some cases a deadlock was inevitable ...

  5. #4
    Sencha User
    Join Date
    Sep 2015
    Posts
    10
    Answers
    1

    Default

    What is store2 loads before store1. How about the following:

    Code:
    afterrender: function() {
    
    
        var win = this;
        win.mask('Please wait...');
    
    
        //array of my stores
        var myStores = [this.store1, this.store2];
    
    
        //function that goes through all stores and checks if all are laoded
        var checkLoadFn = function(store, records, successful, eOpts) {
            var allLoaded = true;
            for (var i = 0; i < myStores.length; i++) {
                if (myStores[i].isLoading()) {
                    allLoaded = false;
                    break;
                }
            }
    
    
            if (allLoaded) {
                win.unmask();
            }
        }
    
    
        //attach the fn to all stores
        for (var j = 0; j < myStores.length; j++) {
            myStores[i].addListener('load', checkLoadFn);
        }
    }

  6. #5
    Sencha User Carlos Souza's Avatar
    Join Date
    May 2015
    Location
    Minas Gerais, Brazil.
    Posts
    29
    Answers
    1

    Default

    Hi jamesgil. Thanks for the answer.

    Quote Originally Posted by jamesgil View Post
    What is store2 loads before store1
    You're right... but it can be easily solved as follows:

    Code:
    listeners: {
        afterrender: function () {
            
            var win= this;
            var store1 = this.store1;
            var store2 = this.store2
    
    
            win.mask('Please wait...');
            
            store1.on('load', function(){
                if (!store2.isLoaded()){
                    store2.on('load', function(){
                        win.unmask();
                    });
                }else{
                    win.unmask();
                }
            });
        }
    }
    However, your solution is actually better, because it works correctly for N number of stores!!! Thank you for your help!!!

Similar Threads

  1. Loading Multiple Stores then rending a form
    By bsmithinghamisd in forum Ext: Q&A
    Replies: 2
    Last Post: 16 Dec 2011, 5:05 AM
  2. Form Loading Mask problem
    By ladro1987 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 1 Dec 2010, 1:36 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •