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

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

    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('isobo listeners...');
                        },
                        select: this.getIso3,
                        change: this.getIso3,
                        scope: this
                    }
});

As you will notice above; bobox'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 bobox 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 bobox record and select one of them?

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

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

    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('isobo listeners...');
                        },
                        select: this.getIso3,
                        change: this.getIso3,
                        scope: this
                    }
});

As you will notice above; bobox'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 bobox 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 bobox record and select one of them?

• javascript
• extjs
• bobox
• record

• 1 console.log(bo.getSelection()); – Evan Trimboli Commented Jan 17, 2018 at 13:30

2 Answers 2

You need to use bobox.getSelection() or bobox.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 bobox. 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 bo box, attached to the country data store
Ext.create('Ext.form.Panel', {
    title: 'Country List Example with ComboBox',
    bodyPadding: 10,
    items: [{
        xtype: 'bo',
        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('bo').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.. :)');
            }
        }
    }]
});

handler: function () {
   var selectionmodel=this.up().down('multiselect');
    var values=selectionmodel.values;
}