Sencha ExtJS - How to properly use the Store load method

I can tell you from my own recent experience that if you don’t use the Sencha ExtJS Store load method properly, nothing will happen. After torturing myself twice by mishandling the load method, I thought maybe it would help if I wrote a quick blog post about how to properly use the load method.

The short answer is that your Sencha code should look like this, where I (a) get a reference to my Store, (b) call the load method, and (c) declare a callback function inside the load method. The code inside the callback method does whatever I want to do when the Store load method call works:

var tasksStore = this.getTasksStore();

// add this as a cgi parameter to the GET url
tasksStore.getProxy().extraParams.projectId = me.getProjectId(tabName);

// it's important to do these actions inside the load() method,
// because the load process can fail, and you need to handle that failure
tasksStore.load({
    callback: function(records, operation, success) {
        if (success == true) {
            // create a checkbox for each task
            var groupItemId = me.makeGroupItemIdName(tabName);
            var group = me.createCheckboxGroup(groupItemId);
            var count = 1;
            tasksStore.each(function(record) {
                var task = record.data.description;
                var checkbox = me.createCheckbox(task, count++);
                me.addCheckboxToGroup(group, checkbox);
            });
            panel.add(group);
            panel.doLayout();
        } else {
            // the store didn't load, deal with it
        }
    }
    // scope: this,
});

In this example I create a checkbox for each task in the Store. It will help to know that the description is a field I defined in my Task model.

The important part of this code is:

• Calling the load method like this, with an embedded callback function. As I have learned by now, if you just call myStore.load() and then try to use the each method on myStore after that, YMMV.
• Doing the desired work inside the callback function, in this case create a series of checkboxes and adding them to a checkboxgroup.

If you want to see how the rest of code works, it’s shown in my Projects controller class on Github. But again, the important part of this code is showing how the Store load method works.