ExtJS Multiple fields in 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?

cpastore84 · Accepted Answer · 2015-06-02 13:49:22Z

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>'
)

answered Jun 2, 2015 at 13:49

cpastore84

5993 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

matt · Accepted Answer · 2015-06-02 14:13:13Z

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 (i.e. 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>';
        }
    })
}

Collectives™ on Stack Overflow

ExtJS Multiple fields in ComboBox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related