ExtJS 4: Combo Boxes, loadRecord() and Remote Stores

TV Remote

A while back I ran into an interesting issue regarding loading records from the database into a form that contained combo boxes driven by remote stores. The problem was, when the record got loaded into the form, the stores for the combo boxes hadn’t loaded, so all the combo boxes said “select one” instead of the option that was chosen when the form got submitted. After doing some digging, I came up with a way around this issue:

The Override Code

Ext.form.field.ComboBox.override( {
    setValue: function(v) {
        v = (v && v.toString) ? v.toString() : v;
        if(!this.store.isLoaded && this.queryMode == 'remote') {
            this.store.addListener('load', function() {
                this.store.isLoaded = true;
                this.setValue(v);
            }, this);
           this.store.load();
        } else {
            this.callOverridden(arguments);
        }
    }
});

Here, we override the setValue method of the ComboBox component and do the following:

  1. Make sure the store is not yet loaded (a custom property I added) and that it is tied to a remote store
  2. Add a listener to the ‘load’ event. When the store is loaded, set isLoaded equal to true and call setValue again.
  3. Load the store
  4. If the store is already loaded or the store is local, call the original overridden setValue method

Just drop this into whatever JS file you keep your other overrides in and you’ll be good to go. Happy coding!

Update: The source code for this snippet is available here.

Write us your thoughts about this post. Be kind & Play nice.

Leave a reply.