how to get the value on extjs combo box?

extjs, extjs4, javascript

Solution

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.

Problem

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 }); ```

Original source