ExtJs组合中的图标

如何在ExtJs组合中显示图标和显示字段。ExtJs组合是否有扩展。请提供一些样品。

请参阅：

---

对于ExtJS4，将带有getInnerTpl方法的listConfig添加到组合框：

xtype: 'combobox',
anchor: '100%',
listConfig: {
  getInnerTpl: function(displayField) {
    return '<img src="/images/icons/{id}.png" class="icon"/> {' + displayField + '}';
  }
},
name: 'type',
fieldLabel: 'Group Type',
displayField: 'label',
hiddenName: 'type',
queryMode: 'local',
store: 'group.Types',
valueField: 'id'

xtype:'combobox'，
主播：100%，
列表配置：{
getInnerTpl:函数（显示字段）{
返回{'+displayField+'}'；
}
},
名称：'类型'，
fieldLabel:“组类型”，
displayField:'标签'，
hiddenName:'类型'，
queryMode:'本地'，
存储区：'group.Types'，
valueField:'id'

另一种方法，我认为可以改进它，但对我来说效果不错：

  ,store: new Ext.data.ArrayStore({
              id: 0,
              fields: [
                'lang', 'desc','url'
             ],
             data: [['CA','Spanish','es.gif'],['VA','Valencian','va.gif']]
 })

 ,tpl : '<tpl for=".">'+
                 '<tpl if="0==0"><div class="x-combo-list-item" ><img src="../img/{url}">       {desc}</div></tpl>'+
                '</tpl>'

，存储：新建Ext.data.ArrayStore({
id:0，
字段：[
“lang”、“desc”、“url”
],
数据：['CA'，'西班牙语'，'es.gif']，['VA'，'Valencian'，'VA.gif']
})
，第三方物流：''+
“{desc}”+
''

在这里，您可以看到如何使用可单击功能显示图标。 我正在使用getInnerTpl更改组合中的tpl行。在创建新的tpl时，我可以更改html，使其包含一个css类，在运行时加载我想要的图标

comboBox = Ext.create('Ext.form.ComboBox', {
            cls: 'fancy',
            itemId: 'itemId',
            store: store,
            displayField: 'displayField',
            valueField: 'InstanceId',
            editable: false,
            padding: '5 4 0 0',
            queryMode: 'local',
            lastQuery: '',
            listConfig: {
                maxHeight: 85,
                getInnerTpl: function (displayField) {
                    scope: me;
                    var tpl = '<tpl for=".">'
                                + '<div data-qtip={' + displayField + '}>'
                                    + '<div class="ItemClickSigh">{' + displayField + '}</div>'
                                    + '<div style="display: inline-block; float: right;">'
                                        + '<div class="EditIcon"></div>&nbsp;'
                                    + '</div>'
                                + '</div>'
                            + '</tpl>';

                    return tpl;
                },
                listeners: {
                    itemclick: function (list, record, item, index, e) {
                        scope: me;
                        me.hendlerComboItemClicked(record, e);
                    },
                    itemmouseenter: function (cmb, record, item, index, e, eOpts) {
                        scope: me;
                        me.hendlerComboItemMouse(item, 'visible');
                    },
                    itemmouseleave: function (cmb, record, item, index, e, eOpts) {
                        scope: me;
                        me.hendlerComboItemMouse(item, 'hidden');
                    }
                }
            }
        });

---

}

欢迎使用堆栈溢出！请不要只回答源代码。试着提供一个关于你的解决方案如何工作的很好的描述。请参阅：。谢谢

.IA_EditIcon {
background-image: url('url')!important;
background-repeat:no-repeat;
width:16px;
height:16px;
cursor: pointer;
margin-right: 5px;
margin-bottom: 0px;
float: left;
display: inline;    
visibility: hidden;