Question

我有一个包含以下字段的商店：

PERSONNAME
primaryRole
secondaryRole

我想填充一个组合框，以便我可以选择他们的主要角色或次要角色。

我目前使用的组合框代码如下：

roleName: {
    editor: Ext.create('Ext.form.ComboBox', {
        store: persons,
        queryMode: 'local',
        displayField: 'primaryRole',
        valueField: 'primaryRole'
    }),
    displayName: 'Role'
}

是否可以从两个商店字段填充组合框，如果是，如何？

Answer 1

您可以更新组合框的tpl和displayTpl配置，以显示您想要的数据。以下是ExtJS 4文档中的一个示例：

// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<div class="x-boundlist-item">{abbr} - {name}</div>',
    '</tpl>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '{abbr} - {name}',
    '</tpl>'
)

Answer 2

对于字段本身中显示的值，请使用displayTpl配置（如果使用多选，请注意）。对于基础Ext.view.BoundList（即扩展组合时显示的列表），覆盖getInnerTpl函数（可以使用组合的listConfig配置完成）：

editor: Ext.create('Ext.form.ComboBox', {
    store: persons,
    queryMode: 'local',
    displayField: 'primaryRole',
    valueField: 'primaryRole',
    displayTpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '<tpl if="primaryRole">{primaryRole}<tpl else>{secondaryRole}</tpl>',
        '</tpl>'
    ),
    listConfig: {
        getInnerTpl: function() {
            return '<tpl if="primaryRole">{primaryRole}<tpl else>{secondaryRole}</tpl>';
        }
    })
}

ExtJS ComboBox中的多个字段

2 个答案: