ExtJS Not Using autoLoad Best Practice

The typical usage pattern in Sencha’s ExtJS for loading data into a visual control such as a grid is to assign a grid to a store, then let the store have autoLoad: true which means that when the store is created, it will automatically be loaded and since it is assigned to a visual control (grid), the grid will be populated.  I don’t like that pattern.  I like to be more in control.  There may be things I want to do before the grid is loaded.

So, what I do is in the application launch event I load my store first and in my store itself, I explicitly tell it not to autoLoad by setting autoLoad to false.  Below is an example of the code I’m using at the moment to handle this.  Notice that I cleverly show a load mask only if the the store takes more than 500 milliseconds to load.

launch: function() {
        var mask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading Data..."});
        var task = new Ext.util.DelayedTask(function(){
            mask.show();
        });
        task.delay(500); // don't show mask for 500 milliseconds
        var ccyStore = Ext.data.StoreManager.lookup('CodeCampYear');
        ccyStore.load({
            scope: this,
            callback: function(records, operation, success) {
                // do on success
                var codeCampYearFirst = ccyStore.getById(8);
                var codeCampYearId = codeCampYearFirst.get("id");
                var sessionsStore = Ext.data.StoreManager.lookup('Sessions');
                sessionsStore.load({
                    params: {
                        codeCampYearId: codeCampYearId,
                        withNotApproved: true  // always get all sessions and let filter deal with approved or not
                    },
                    callback: function(records, operation, success) {
                        task.cancel(); // make sure mask never shows since we are done
                        mask.hide(); // mask may or may not be showing but hide anyhow, no harm.
                        Ext.create('SessionEditor.view.MainView');
                    }
                });
            }
        });
    }

Hope this helps.

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP since 2007. In addition, he's a multi-course video author at Pluralsight. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Follow

Get every new post delivered to your Inbox

Join other followers: