Ext Js Combobox displayTpl is shown twice - extjs

Question

I'm trien to populate a ExtJS 7.3.1 combobox with key/value from an array.
Then I need to display both (Key and Value) on the combobox and the dropdown like this:
var test_store = new Ext.data.SimpleStore({fields : ['value','text'],data : []});
var testArr = [
['test 1', '1'],
['test 2', '2'],
['test 3', '3'],
['test 4', '4'],
]
var combo = Ext.getCmp('test');
test_store = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: testArr,
});
Ext.create({
xtype: 'formpanel',
renderTo: document.body,
items: [{
xtype: 'combobox',
id: 'test',
name: 'test',
label: 'test',
store: test_store,
displayField: 'text',
valueField: 'value',
queryMode: 'local',
editable: false,
displayTpl: '{value} - {text}',
itemTpl: '<div data-qalign="b-t" data-qanchor="true" data-qtip="{text}">{value} - {text} </div>',
autocomplete: false,
}]
});
But when I unfocus the combobox after I have selected a new value, it will show the displayTpl twice, am I doing something wrong or do I need to report a bug?
fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/3c6i

Answer 1

I really would only override displayTpl or itemTpl if you know what you're doing. In the case of this, I'd say create a separate field and do the conversion there. Like this
var test_store = new Ext.data.SimpleStore({fields : ['value','text'],data : []});
var testArr = [
['test 1', '1'],
['test 2', '2'],
['test 3', '3'],
['test 4', '4'],
]
var combo = Ext.getCmp('test');
test_store = new Ext.data.SimpleStore({
fields: ['value', 'text', {
name: 'display',
type: 'string',
depends: ['value', 'text'],
convert: function(value, record) {
return `${record.get('value')} - ${record.get('text')}`
}
}],
data: testArr,
});
Ext.create({
xtype: 'formpanel',
renderTo: document.body,
items: [{
xtype: 'combobox',
id: 'test',
name: 'test',
label: 'test',
store: test_store,
displayField: 'display',
valueField: 'value',
queryMode: 'local',
autocomplete: false,
anyMatch: true,
forceSelection: true
}]
});