Question

I have a combobox in a view that is tied to a data store / model that uses Ext.Direct to load the data for the drop down.

In my controller where I open the view that contains the combobox, I kick off the load of the store.

This all works, but when I click on the combobox, it kicks off another load (masks the screen with loading) and re-loads the store. I need to prevent that second load since it’s already loading.

Store:

Ext.define('ESDB.store.Employees', {
    extend: 'Ext.data.Store',
    model: 'ESDB.model.Employee',
    autoLoad:false,
    proxy: {
        type: 'direct',
        api: {
            create  : undefined,
            read    : EmployeeService.getRecords,
            update  : EmployeeService.setRecord,
            destroy : undefined
        }

    }
});

Model:

Ext.define('ESDB.model.Employee', {
    extend: 'Ext.data.Model',
    fields: ['id','name','login','pw','domain','lastLogin','addedDate','active','ulevel','staffID']
});

View:

(relevant part – the combo box – there are no other references to the store or model in the view)

this.items = [
                {
                xtype: 'form',
                items: [
{
                        xtype: 'combobox',
                        name : 'callTakenBy',
                        fieldLabel: 'Taken By',
                        displayField: 'name',
                        queryMode: 'remote',
                        valueField: 'id',
                        store: "Employees",
                        editable: false
                    }
]]}

Controller (when they double click a row in the grid, it kicks off the load for the employees store, then opens the view):

encounterRowClicked: function(grid, record) {
            console.log('Double clicked on ' + record.get('id'));

            var store = this.getEmployeesStore();
                store.load({
                    params: {
                    },
                    callback: function(r,options,success) {  } //callback
                }); //store.load


            // load the view:

            var view = Ext.widget('encounteredit');
            view.down('form').loadRecord(record);

        }

All this code works, but when I get in to the view, where the combobox is properly displaying one of the loaded values, I click on the combobox and it kicks off another load of the store. It works, but then I have to click again to actually choose a different value. So I am looking for a way to tell the combobox to simply use the store, not to load it– seems like it should already know that it’s loaded and to simply use it?

Answer 1

You need to set the queryMode : 'local' for the combobox. As you can see in the docs, the default value is remote (by the way you should remove the mode: ‘remote’, mode is not a valid config for the combobox).

In queryMode: ‘remote’, the ComboBox loads its Store dynamically based upon user interaction.

You should use ‘local’ because you already have the data localy in the store