How to get all values from combobox selected record?

Question

I've a combobox which returns 10 values from DB;

Ext.define('Iso3Combo', {
    extend:'',
    xtype:'iso3combo',

    requires: [
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    name: iso3
    fieldLabel: iso3,
    displayField:'iso3', // takes from DB 
    valueField:'id', // takes from DB
    store: {
        proxy: {
            type: 'ajax',
            url: ...getUrl() + '/country/list',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        },
        autoLoad: true
    },
    queryMode: 'local',
    autoLoad:true,
    bind: '{currRec.iso3}',
    listeners: {
                        fn: function () {
                          console.log('isocombo listeners...');
                        },
                        select: this.getIso3,
                        change: this.getIso3,
                        scope: this
                    }
});

As you will notice above; combobox's displayed content is iso3 and gets id as primary key. Therefore I can not change valueField. So tried this function to reach some other value for that selected combobox record;

getIso3: function () {
        var me = this;

        // var rec = me.getSelectedRecords(); //says getSelectedRecords is not a function

        var country = me.down('[name=iso3]').getValue(); // returns 'id'
        // var isoCode = rec.data.iso3; //Couldn't be success to verify if I get correct value..

How can i be able to load all values of DB from selected combobox record and select one of them?

Answer 1

You need to use combobox.getSelection() or combobox.getSelectedRecord(). This both method will return you selected record. Or inside of select event you will get selected record in second parameter so also you can get iso3 value like this record.get('iso3').

Here is an FIDDLE, I have created a demo using form and combobox. This will help you or guide you to solve your problem.

I am using this COUNTRY JSON.

Code Snippet

// The data store containing the list of Country
var country = Ext.create('Ext.data.Store', {
    fields: ['iso3', 'id'],
    proxy: {
        type: 'ajax',
        url: 'countryList.json',
        reader: {
            type: 'json',
            rootProperty: 'countrylist'
        }
    },
    autoLoad: true
});

// Create form  with the combo box, attached to the country data store
Ext.create('Ext.form.Panel', {
    title: 'Country List Example with ComboBox',
    bodyPadding: 10,
    items: [{
        xtype: 'combo',
        fieldLabel: 'Choose Country',
        store: country,
        queryMode: 'local',
        displayField: 'iso3',
        valueField: 'id',
        listeners: {
            select: function (field, record) {
                Ext.Msg.alert('Success', `Selected country <br> iso3 : <b>${record.get('iso3')}</b> <br> id : <b>${record.get('id')}</b>`);
            }
        }
    }],
    renderTo: Ext.getBody(),
    buttons: [{
        text: 'Get Combo Value/Record on button click',
        handler: function () {
            var record = this.up('form').down('combo').getSelectedRecord();
            if (record) {
                Ext.Msg.alert('Success', `Selected country <br> iso3 : <b>${record.get('iso3')}</b> <br> id : <b>${record.get('id')}</b>`)
            } else {
                Ext.Msg.alert('Info', 'Please select contry first.. :)');
            }
        }
    }]
});