Ext JS 4: A Remote to Local QueryMode Hybrid ComboBox

I’ve needed this multiple times, an Ext JS combobox that is “remote”, but after loading all the combobox data on the first trigger click or when the user types in the combo field, it becomes “local”. Basically, I just don’t want the database hit unless the user actually uses the combobox.

Since this was my second or third time needing this, it’s time for a plugin. (gist 3659866)

And to use it, create the store for your combo box as having autoLoad set to false, and just put the plugin on the combobox.

// Define the model for a State
Ext.regModel('State', {
    fields: [
        {type: 'string', name: 'abbr'},
        {type: 'string', name: 'name'},
        {type: 'string', name: 'slogan'}
    ]
});

// The data store holding the states
var store = Ext.create('Ext.data.Store', {
    model: 'State',
	autoLoad: false,
	proxy: {
		type: 'ajax',
		url: '/states.json',
		reader: {
			type: 'json',
			root: 'states'
		}
	}
});

// Simple ComboBox using the data store
var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
    fieldLabel: 'Select a single state',
    renderTo: 'simpleCombo',
    displayField: 'name',
    width: 500,
    labelWidth: 130,
    store: store,
    queryMode: 'remote',
    typeAhead: true,
    plugins: ['remotetolocalcombo']
});

Version Info: Ext JS 4.1.1

Advertisements

12 comments

    1. I didn’t know about the queryCaching config. I see it is new since 4.1.0. Thanks for letting me know about it!

      Looking at it, I think my “hybrid combo” is slightly different. The hybrid combo starts off as remote, so that it only loads the related store if it is used. After that, it is local and the “query” is used to filter the store/drop-down list.

      This is different than just setting queryCaching to true (the default by the way). The docs for queryCaching say “When true, this prevents the combo from re-querying (either locally or remotely) when the current query is the same as the previous query”. But if your query changes, and your queryMode is set to remote, a store load request will be sent to the server again. The “query” is based on what is typed into the input filed, so switching from “abc” to “abcd” will cause the store to load again.

  1. Hello,

    i have tried to use your plugin but without success.
    I explain :
    when user start typing and then a load request is send to the remote but as soon as the combo becomes “local” (store is loaded) if user add additional patterns then it gives an empty list as results.
    Does my application needs to store remote load as local to get the possibility to query to result again ?
    Thanks.

    1. Hmmm… I’m not sure. I just tested mine out again and doing as you described, typing in the combobox, then combo loads, continue typing, works for me. Maybe it has to do w/some of the other combo related configs? The plugin just changes the query mode from remote to local… you should be able to debug the combobox doQuery method to see what is going on. Let me know!

  2. Great and Useful post.
    Can you suggest me the same for Grid and it’s Pagination.
    I want to load all the data at once from remote and from then need to do pagination on loaded local data.
    It would be very help ful.

    Thanks.

      1. Could you please send me some example on this and for this combo box also. While trying these I am getting file not found, Ext.loader… etc kind of issues. I am a newbie to ExtJS. So please provide detailed information.

        Thanks.

      2. Sorry, I’m not actually working w/this day-to-day right now. Spend some time looking at the links in the Sencha Forums or just reading documentation about how to work w/ExtJS plugins and extensions.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s