ExtJS ComboBox中的多个字段

Question

I have a store with the following fields:

• personName
• primaryRole
• secondaryRole

I want to populate a combo-box so that I can choose from either their primary or secondary role.

The combobox code I currently have looks like this:

roleName: {
    editor: Ext.create('Ext.form.ComboBox', {
        store: persons,
        queryMode: 'local',
        displayField: 'primaryRole',
        valueField: 'primaryRole'
    }),
    displayName: 'Role'
}

Is it possible to populate a combobox from two store fields, if so, how?

Answer 1

You can update the tpl and displayTpl configs for the combobox to display the data however you want. Here's an example from the ExtJS 4 documentation:

// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<div class="x-boundlist-item">{abbr} - {name}</div>',
    '</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '{abbr} - {name}',
    '</tpl>'
)

Answer 2

For the displayed value in the field itself, use the displayTpl config (be careful though if you use multiselection). For the underlying Ext.view.BoundList (ie the list which is displayed when the combo is expanded), overwrite the getInnerTpl function (can be done using the combo's listConfig configuration):

editor: Ext.create('Ext.form.ComboBox', {
    store: persons,
    queryMode: 'local',
    displayField: 'primaryRole',
    valueField: 'primaryRole',
    displayTpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '<tpl if="primaryRole">{primaryRole}<tpl else>{secondaryRole}</tpl>',
        '</tpl>'
    ),
    listConfig: {
        getInnerTpl: function() {
            return '<tpl if="primaryRole">{primaryRole}<tpl else>{secondaryRole}</tpl>';
        }
    })
}