ComboBox with local data in SimpleStore

An example of a ComboBox in a Panel. The ComboBox is using a local SimpleStore, and responding to the ‘select’ and ‘change’ events.

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

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

    var store = new Ext.data.SimpleStore({
        fields: ['dataFieldName', 'displayFieldName'],
        data: [['FLC', 'Carrier'], ['DES', 'Destination'], 
            ['CTY', 'Country'], ['MON', 'Month']],
        autoLoad: false
    });

    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: 'displayFieldName',   // what the user sees in the popup
            valueField: 'dataFieldName',        // what is passed to the 'change' event
            typeAhead: true,
            forceSelection: true,
            mode: 'local',
            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.
                select: function(combo, record, index){
                    console.log(record.data.dataFieldName);
                    console.log(record.data.displayFieldName);
                    console.log(index);
                }
            }
        }]
    });
});