ExtJs组合框中的图标

Question

如何在 ExtJs Combo 中显示图标以及显示字段。有没有适用于 ExtJs Combo 的扩展？请提供一些示例。

- MNR

Answer 1

为ExtJS4的combobox添加一个listConfig，并使用getInnerTpl方法：

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'

- Thomas Lauria

Answer 2

请参考以下内容：

请参考：

解决方案-组合框选项中的图像

带有国旗图像的ExtJS国家选择器

- MMT

Answer 3

我认为还有另外一种方式可以改善它，但对我来说已经足够好了：

  ,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>'

- Gustavo

Answer 4

在这里，您可以了解如何显示带有可点击功能的图标。我使用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');
                    }
                }
            }
        });

CSS：

.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;

}

- Barak

---

欢迎来到Stack Overflow！请不要仅仅回答源代码，尽量提供一个关于你的解决方案如何工作的好描述。参见：如何撰写一个好的答案？。谢谢。 - sɐunıɔןɐqɐp