Question

我试图用数组中的键/值填充 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}&nbsp;</div>',
        autocomplete: false,
    }]
});

但是当我在选择新值后取消组合框的焦点时，它会显示两次 displayTpl，我做错了什么还是需要报告错误？

小提琴： https://fiddle.sencha.com/#view/editor&fiddle/3c6i

Answer 1

如果您知道自己在做什么，我真的只会覆盖 displayTpl 或 itemTpl。在这种情况下，我会说创建一个单独的字段并在那里进行转换。 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
    }]
});

Ext Js Combobox displayTpl 显示两次

1 个答案: