Блог

Я пытаюсь заполнить выпадающий список ExtJS 7.3.1 ключом / значением из массива.

Затем мне нужно отобразить оба (ключ и значение) в выпадающем списке и в выпадающем списке следующим образом:

 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}amp;nbsp;</div>',
        autocomplete: false,
    }]
});
 

Но когда я расфокусирую combobox после выбора нового значения, он дважды отобразит displayTpl, я делаю что-то не так или мне нужно сообщить об ошибке?

скрипка: https://fiddle.sencha.com/#view/editoramp;fiddle/3c6i

Я бы действительно переопределил только displayTpl or itemTpl , если вы знаете, что делаете. В этом случае я бы сказал, создайте отдельное поле и выполните преобразование там. Вот так

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