如何为Ext.form.field.ComboBox设置两类不同显示格式

嘿，这个需求很好实现，咱们利用ExtJS ComboBox的模板配置就能搞定！我给你两种常用的方案，你可以根据自己的数据源情况选择：

方案一：给数据源添加标识字段（推荐，扩展性强） #

首先给你的每个选项加一个布尔类型的字段，比如showFullName，用来标记这个选项是否需要显示abbr - name的完整格式。

1. 准备带标识的数据源 #

var stateStore = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name', 'showFullName'],
    data: [
        // 5个需要显示完整格式的项
        {abbr: 'AL', name: 'Alabama', showFullName: true},
        {abbr: 'AK', name: 'Alaska', showFullName: true},
        {abbr: 'CA', name: 'California', showFullName: true},
        {abbr: 'NY', name: 'New York', showFullName: true},
        {abbr: 'TX', name: 'Texas', showFullName: true},
        // 5个只显示缩写的项
        {abbr: 'AZ', name: 'Arizona', showFullName: false},
        {abbr: 'AR', name: 'Arkansas', showFullName: false},
        {abbr: 'CO', name: 'Colorado', showFullName: false},
        {abbr: 'CT', name: 'Connecticut', showFullName: false},
        {abbr: 'DE', name: 'Delaware', showFullName: false}
    ]
});

2. 配置ComboBox的模板 #

通过listConfig.itemTpl控制下拉列表里的显示，displayTpl控制选中后输入框内的显示，用ExtJS的XTemplate语法做条件判断：

Ext.create('Ext.form.field.ComboBox', {
    fieldLabel: '选择州',
    store: stateStore,
    queryMode: 'local',
    valueField: 'abbr',
    // 下拉列表项的模板
    listConfig: {
        itemTpl: new Ext.XTemplate(
            '{[values.showFullName ? values.abbr + " - " + values.name : values.abbr]}'
        )
    },
    // 选中后输入框的显示模板
    displayTpl: new Ext.XTemplate(
        '{[values.showFullName ? values.abbr + " - " + values.name : values.abbr]}'
    ),
    renderTo: Ext.getBody()
});

方案二：直接指定特定字段值判断（无需修改数据源） #

如果不想修改现有数据源，也可以直接在模板里判断哪些abbr需要显示完整格式，比如提前定义好要显示完整的缩写列表：

// 定义需要显示完整格式的5个缩写
var fullDisplayAbbrs = ['AL', 'AK', 'CA', 'NY', 'TX'];

Ext.create('Ext.form.field.ComboBox', {
    fieldLabel: '选择州',
    store: yourExistingStore, // 用你原来的数据源即可
    queryMode: 'local',
    valueField: 'abbr',
    listConfig: {
        itemTpl: new Ext.XTemplate(
            '{[Ext.Array.contains(fullDisplayAbbrs, values.abbr) ? values.abbr + " - " + values.name : values.abbr]}'
        )
    },
    displayTpl: new Ext.XTemplate(
        '{[Ext.Array.contains(fullDisplayAbbrs, values.abbr) ? values.abbr + " - " + values.name : values.abbr]}'
    ),
    renderTo: Ext.getBody()
});

这样就能完美实现你要的5个字段显示abbr - name、另外5个只显示abbr的需求啦！

内容的提问来源于stack exchange，提问作者Shadidy