Skip to content

ExtJS Not Using autoLoad Best Practice

Updated: at 02:12 PM

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.

Check out the ORM (Object Relational Mapper) PRISMA. The database access method I use in all my projects