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

@sitifensys based on the use of Ext.define & Models it must be some version of 4.x — sra, Aug 26 '12 at 06:43

sra · Accepted Answer · 2012-08-28T08:56:31.327

12

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.

edited Aug 28 '12 at 08:56

answered Aug 25 '12 at 06:59

sra

23,820
7
55
89

Thanks. I used records[0], I got error. But when I try to use var iComboValue = simpleCombo.getValue(); Ext.Msg.alert('Hello this is the title', iComboValue); . It worked for me. If I use iComboValue[0], it only gives me the first letter of the selecting option. How can I do multiple selecting and then store those selected values? Thanks – shiro Aug 27 '12 at 13:18
@shiro take a look at the [multiSelect](http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-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. – sra Aug 28 '12 at 08:54
`var i = simpleCombo.getValue();` is a better solution. – pllee Sep 05 '12 at 05:00
3

You should read the full answer before commenting such things. getValue() is clearly mentioned even the difference between the event solution – sra Sep 05 '12 at 06:24

score 10 · Answer 2 · answered Aug 26 '12 at 13:09

10

You can also use:

var iComboValue = simpleCombo.getValue();

answered Aug 26 '12 at 13:09

Izhaki

23,372
9
69
107

score 0 · Answer 3 · answered May 12 '14 at 09:04

may be you should try this

 // to get the combobox selected item outside the combo listener
        simpleCombo.on('change', function (combo, record, index) {

            alert(record);  // to get the selected item

            console.log(record);  // to get the selected item

        });

how to get the value on extjs combo box?

3 Answers3