Extjs 3.4 combobox keep value format after selection

Question

Using Extjs 3.4 I have a combobox with a tpl config:

var myCombo= new Ext.form.ComboBox(
    {
            typeAhead: true,
            triggerAction: 'all',
            store: myStore,
            valueField: 'value',
            displayField: 'desc',
            tpl: '<tpl for="."><div class="x-combo-list-item">{value} - {desc}</div></tpl>'
    });

When I click in the combo the value - decription string is correctly shown. But when I select a value - description the combobox only show me the valueField.

Is possible to keep the tpl format after selecting a row from combobox?

jcgarcia jcgarcia · Accepted Answer · 2014-07-28T16:24:58

Is not possible on ExtJS 3.4.0 version..

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox-cfg-tpl

But you can use beforeselect event or change event to modify manually...

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox-event-beforeselect http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox-event-change

On ExtJS 4.1.1 you can try using the following:

var myCombo= new Ext.form.ComboBox(
    {
            typeAhead: true,
            triggerAction: 'all',
            store: myStore,
            valueField: 'value',
            displayField: 'desc',
            // Template for the dropdown menu.
            tpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '<div class="x-boundlist-item">{value} - {desc}</div>', '</tpl>'),
            // template for the content inside text field
            displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '{value} - {desc}', '</tpl>')
    });

Here's some example

http://try.sencha.com/extjs/4.1.1/docs/Ext.form.field.ComboBox.2/viewer.html

Best Regards,

Extjs 3.4 combobox keep value format after selection

2 Answers