ExtJS 5: How to Customize Combobox display

0
votes

Here I'm using ExtJS 5.

I have to display a combobox with the selected value of the another combobox below it.

Use Case:

I have to display the selected value of combobox below the combobox input field as shown in the below image-

enter image description here

This combox field will be used in multiple places.

Here I want to override the template of combobox. But when I configure the "tpl" config with template it is applying to combobox list items instead of combobox.

How to override the default rendering of combobox ?

2
extjscomboboxextjs5

2 Answers

2
votes

The Labelable mixin provides the relevant Templates. You could try afterBodyEl.

To see how complicated Sencha made it to update the templates, have a look at the code of the setActiveErrors method.

0
votes

You can show required data using different templates in combobox.

For my use case I used "afterSubTpl" to show text below input field of combobox.

Sample Code:

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    afterSubTpl: '<div>My Custom Text</div>',
    renderTo: Ext.getBody()
});