how to get the value on extjs combo box?

Question

I have a following code for combo box, how can I get the value that is selected in the combobox and load that value into a variable, and use it later.

Thank you

Ext.define('Column', {
    extend: 'Ext.data.Model',
    fields: ['data1', 'Data2']
});

var store = Ext.create('Ext.data.Store', {
    model: 'Column',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/data.xml',
        reader: {
            type: 'xml',
            record: 'result'
        }
    }
});

var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
    store: store,
    displayField: 'data1',
    valueField: 'data1',
    width: 250,
    labelWidth: 120,
    fieldLabel: 'select a value',
    renderTo: 'simpleCombo',
    queryMode: 'local',
    typeAhead: true
});

Answer 1

Simply use the select event

var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
            store: store,
            displayField: 'data1',
            valueField: 'data1' ,
            width: 250,
            labelWidth: 120,
            fieldLabel: 'select a value',
            renderTo: 'simpleCombo',
            queryMode: 'local',
            typeAhead: true,
            listeners: { 
               select: function(combo, records) {
                   // note that records are a array of records to be prepared for multiselection
                   // therefore use records[0] to access the selected record
               }
        });

API Link

Additional content from the comments:

Take a look at the multiSelect property of the combobox. You get all values separated by a defined delimiter and the select event will give you a records array with more that one record. Note the that getValue() only give you the defined displayField which is a string and not the record itself. So using iComboValue[0] gives you the first character. The selected records should always be accessed using the selected event. But you may store them in a array for later use and overwrite it with any new select.