EXT-JS ui not updating after adding data to store

Question

i am trying to add item to combo-box after its created but in store data get added but its not updated in UI.

Ext.onReady(function () {

    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        autoLoad: true,
        fields: ["name", "value"],


        listeners: {
            load: function(store, rec) {
                store.add([["val1",1],["val2",2]]);
            }
        }
    });

    Ext.create('Ext.form.field.ComboBox', {
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        valueField: "value",
        displayField: "name",
        renderTo: Ext.getBody()
    });

    var s2 = Ext.getStore('simpsonsStore');
    s2.loadData([["val3",3]],true);
});

Val1 and Val2 are added first. after render i want to add val3

Answer 1

I think autoload=true assumes there's no data and is whipping s2.loadData() which gets executed first. This doesn't happen in latest versions.

Manually calling store.load() with no autoload solves the problem. Also combobox needs to queryMode='local'

Similar working fiddle: http://jsfiddle.net/tonymayoral/8jzfo7zj/1/

var st=Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        //autoLoad: true,
        fields: ["name", "value"],

        listeners: {
            load: function(store, rec) {
                store.add([["val1",1],["val2",2]]);
            }
        }
    });

    st.load(); 

    Ext.create('Ext.form.field.ComboBox', {
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        valueField: "value",
        displayField: "name",
        queryMode:'local', //needs to be local
        renderTo: Ext.getBody()
    });

    var s2 = Ext.getStore('simpsonsStore');
    s2.loadData([["val3",3]],true)