CODEWITHSUNDEEP
extjscombobox
user1066183
user1066183

Reputation: 2584

Extjs 3.4 combobox keep value format after selection

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?

Upvotes: 1

Views: 1828

Answers (2)

Gad
Gad

Reputation: 42306

jcgarcia is right in the fact that you cannot have a custom template for the way the text is rendered within the TriggerField element. The only thing you can do is specify the JSON attribute that will be displayed by setting displayField to something...

You are left with 2 options:

1/ use the events like jcgarcia proposed.

2/ a simpler solution is that the server can send a new attribute with the info to display.

currently the server returned this data in the store:

[{value:1, desc:'a'}, {value:2, desc:'b'}, ...]

// selecting a value would only display 'a'

have the server return this instead to the store:

[{value:1, desc:'a', displayed:'1 - a'}, {value:2, desc:'b', displayed:'2 - b'},...]

then change

displayField: 'desc',

to

displayField: 'displayed',

This means that you might be passing some data twice and you will be rendering part of a view within the server side so it's not ideal. But it's easy to implement and the trade off might be worth it.

Cheers

Upvotes: 1

jcgarcia
jcgarcia

Reputation: 3882

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,

Upvotes: 1

Related Questions