Loading the items for a combo box in advance with EXTjs

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):

Page is loaded, combo not visible, but firebug shows priorities is already loaded

Clicking on the cell to edit it:

cell is clicked to edit, combo box now visible, firebug shows no changes

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.

down arrow on dropdown clicked, firebug shows another ajax call was made.

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"
        }
    ]
}

Make sure you are using queryMode 'local', autoLoad true, and that you instantiate your store before attaching it to the combo. That should force it to fetch values before you show it to the end user. — Joseph Lust
Hey Twisted Pear! Thanks for the info! setting querymode to local did the trick! If you Submit it as the answer, I'll accept it asap :) — RoboKozo

zyphos zyphos · Accepted Answer · 2011-07-05T21:37:04

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.

Loading the items for a combo box in advance with EXTjs

1 Answers