ComboBox with remote JSON data

Assume we have the following JSON data:

stcCallback1001({
    "totalCount":"2",
    "Names":[
        {"name":"one", "ID":"1"},
        {"name":"two", "ID":"2"}
    ]
})

(Note that the JSON object is wrapped in the “stcCallback1001” function - this wrapping is required by the Ext “ScriptTagProxy”, which enables cross-site retrieval of data).

Below we have a ComboBox in a panel that will correctly display/handle the above data. The mode: ‘remote’ and triggerAction: ‘all’ config parameters are critical to getting this to work.

Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';

Ext.onReady(function(){
    Ext.QuickTips.init();

    var proxy = new Ext.data.ScriptTagProxy({
        url: 'http://localhost:8080/cbTest'
    });

    var store = new Ext.data.Store({
        proxy: proxy,
        reader: new Ext.data.JsonReader({
            id: 'ID',
            totalProperty: 'totalCount',
            root: 'Names'
        }, [{
            name: 'ID'
        }, {
            name: 'name'
        }])
    });


    var simple = new Ext.form.FormPanel({
        id: 'simpleForm',
        title: 'Simple Form',
        labelWidth: 75,
        frame: true,
        bodyStyle: 'padding:5px 5px 0',
        width: 350,
        renderTo: Ext.getBody(),

        items: [{
            store: store,
            fieldLabel: 'ComboBox',
            displayField: 'name',
            valueField: 'name', 
            typeAhead: true,
            forceSelection: true,
            mode: 'remote',
            triggerAction: 'all',
            selectOnFocus: true,
            editable: true,
            xtype: 'combo',

            listeners: {

                // 'change' will be fired when the value has changed and the user exits the ComboBox via tab, click, etc.
                // The 'newValue' and 'oldValue' params will be from the field specified in the 'valueField' config above.
                change: function(combo, newValue, oldValue){
                    console.log("Old Value: " + oldValue);
                    console.log("New Value: " + newValue);
                },

                // 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard.
                select: function(combo, record, index){
                    console.log(record.data.name);
                    console.log(index);
                }
            }
        }]
    });
});