ExtJS ComboBox 列表，带有基于商店数据的图标和文本

Posted 2023-03-16

【中文标题】ExtJS ComboBox 列表，带有基于商店数据的图标和文本

【英文标题】：ExtJS ComboBox list with icons and text based on store data

【发布时间】：2016-05-26 12:45:30

【问题描述】：

我有一个combobox，它是从商店提供的，其中包含iconCLS 和文本的信息。

我希望它同时显示图标和文本，如示例Image 所示 我可以将它们添加到下拉列表中，但在选择一个值后，图标会消失。

这是我的代码：

CSS：

.customer-info-sub-chooser-gold-icon 
    background-repeat: no-repeat;
    background-image: url('images/customer-info/sub-chooser-gold-icon.png');
    content: url('images/customer-info/sub-chooser-gold-icon.png');
    width: 80px;
    display: inline-block;
    background-position: 55px 2px;

分机：

xtype: 'combobox',
minHeight: 30,
name: 'contactType',
padding: '5 0 0 10',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
isEditable: true,
allowBlank: false,
disabled: false,
columnWidth: 1 / 4,
store: Ext.create('Components.contacts.contactComponent.store.ChooserStore'),
    listConfig: 
        //test
        getInnerTpl: function (displayField) 
            return '<img src="customer-info-sub-chooser-gold-icon" class="icon"/> ' + displayField + '';
        
    

商店

Ext.define('Components.contacts.contactComponent.store.ChooserStore', 
    extend: 'Ext.data.Store',
    model: 'Processes.customerInfo.model.ComboBox',
    autoDestroy: true,
    proxy: "memory",
    data: [
        id: 'sub-chooser-gold-icon', name: "Chooser",
        id: 'sub-chooser-grey-icon', name: "Sub-chooser"
    ]
);

组合框模型：

Ext.define('Processes.customerInfo.model.ComboBox', 
    extend: 'Ext.data.Model',
  fields: [
    name: 'id', type: 'string',
    name: 'name', type: 'string'
  ]
);

谁能帮帮我？

注意：我必须通过cls"customer-info-sub-chooser-gold-icon"插入图标。

【参考方案1】：

Working fiddle

你快到了，只需使用tpl（Ext.view.BoundListView 是xtype: 'combo'）配置的选择器而不是getInnerTpl，如下所示：

listConfig: 
    tpl: '<tpl for="."><div class="x-boundlist-item"><img src="icon" class="icon"/>name</div></tpl>'

还阅读了有关使用 XTemplate 的一般信息。

【讨论】：

那么，我应该在组合框上使用 afterRender 调用该方法吗？

是的，你可以在afterrender事件处理程序中做到这一点。