javascript - 如何从组合框选定的记录中获取所有值？

Question

我有一个组合框，它从数据库返回 10 个值；

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

正如您在上面注意到的； combobox显示的内容为iso3，并获取id作为主键。因此我无法更改 valueField。因此尝试使用此函数来达到所选组合框记录的其他值；

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..

我怎样才能从选定的组合框记录中加载数据库的所有值并选择其中一个？

Answer 1

您需要使用combobox.getSelection()或combobox.getSelectedRecord()。这两种方法都会返回您选择的记录。或者select里面事件您将在第二个参数中选择record，因此您也可以获得iso3值，如下所示record.get('iso3') .

这是一个 FIDDLE ，我使用 form 和 combobox 创建了一个演示。这将帮助您或指导您解决问题。

我正在使用这个 COUNTRY JSON 。

代码片段

// 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.. :)');
            }
        }
    }]
});