Ext Js Combobox displayTpl is shown twice

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}&nbsp;</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
    }]
});