Question

I have the items for a combo box being loaded from a store but what happen is when the combo box item list is to be displayed because the user clicked to ‘expand it’, it has to ‘re-load’ the data from the store proxy. This causes the list to flash and become unselected, forcing the user to click the drop down another time.

Step 1 (on page load):

Clicking on the cell to edit it:

Clicking on the down arrow in the combobox. Again, this ajax call forces the combobox to automatically close, forcing the user to re-click the down arrow.

View

Ext.define('AM.view.card.BacklogList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.backlogcardlist',

    title: 'Backlog',
    store: 'BacklogCards',

    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],

    columns: [
        { header: 'ID', dataIndex: 'id' },
        { header: 'Name', dataIndex: 'name', field: 'textfield' },
        {
            header: 'Priority',
            dataIndex: 'priority_id',
            renderer: function(value){
                if (value==3)
                {
                    return "L";
                }
                else if (value==2)
                {
                    return "M";
                }
                else
                {
                    return "H";
                }
            },
            width: 130,
            field: {
                xtype: 'combobox',
                typeAhead: true,
                store: 'Priorities',
                displayField: 'name',
                valueField: 'id',
                listClass: 'x-combo-list-small'
            }
        }
    ]

});

Store:

Ext.define('AM.store.Priorities', {
    extend: 'Ext.data.Store',
    model: 'AM.model.Priority',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'app/data/priorities.json',
            update: 'app/data/updateUsers.json'
        },
        reader: {
            type: 'json',
            root: 'priorities',
            successProperty: 'success'
        }
    }
});

priorities.json

{
    success: true,
    priorities: [
        {
            id              : 1, 
            name            : "High",
            short_name      : "H"
        },
        {
            id              : 2, 
            name            : "Medium",
            short_name      : "M"
        },
            {
            id              : 3, 
            name            : "Low",
            short_name      : "L"
        }
    ]
}

Answer 1

I believe what you need to do is set queryMode: “local” on the combobox field config.

field: {  
xtype: 'combobox',  
queryMode: 'local',  
typeAhead: true,  
store: 'Priorities',  
displayField: 'name',  
valueField: 'id',  
listClass: 'x-combo-list-small'
}

From the Ext JS Combobox API documentation (emphasis added):

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

This is typically used for “autocomplete” type inputs, and after the user finishes typing, the Store is loaded.

You have your store’s autoLoad set to true, which means you shouldn’t have an issue with queryModel being local, since your data should already be in the store upon creation. I will say I haven’t gone digging enough to explain the behavior, maybe someone else can elaborate the intricacies of the combobox.