Question

我尝试使用图片（或其他）创建组合，当我选择一个选项时，组合中的值有一些选项。

我创建一个组合框，如下所示：

enter image description here

但是当我选择一个看起来像的选项时：

enter image description here

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [{
     "abbr":"AL", 
     "name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>"
    },
    {
     "abbr":"AK", 
     "name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>"
    },
    {
     "abbr":"AZ", 
     "name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>"
    }]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose',
    store: states,
    tpl: '<tpl for="."><div class="x-boundlist-item" >{name} {abbr}</div></tpl>',
    displayTpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '{name} {abbr}',
        '</tpl>'
    ),
    queryMode: 'local',
    displayField: 'abbr',
    valueField: 'abbr',
    renderTo: Ext.getBody()
});

如何解决这个问题？谢谢！

Answer 1

您将无法使用模板解决此问题。 ComboBox的显示值用作文本输入字段的值，这就是您的HTML按字面显示的原因。

它可能有点hackish，但您可以直接在select上收听inputEl事件并更新一些样式。

请注意，此示例是近似值。您可能需要进行试验以获得所需的效果。

var urlBase = 'http://icons.iconarchive.com/icons/famfamfam/silk/16/';

// Don't use image tag, just URL of icon
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [
        {abbr: 'AL', name: urlBase + 'folder-picture-icon.png'},
        {abbr: 'AK', name: urlBase + 'folder-picture-icon.png'},
        {abbr: 'AZ', name: urlBase + 'folder-picture-icon.png'}
    ]
});

Ext.create('Ext.form.field.ComboBox', {
    fieldLabel:   'Choose',
    store:        states,
    queryMode:    'local',
    displayField: 'abbr',
    valueField:   'abbr',
    renderTo:     Ext.getBody(),
    tpl: [
        '<tpl for=".">',
            '<div class="x-boundlist-item">',
                '<img src="{name}"/>{abbr}',
            '</div>',
        '</tpl>'
    ],
    listeners: {
        select: function (comboBox, records) {
            var record = records[0];
            comboBox.inputEl.setStyle({
                'background-image':    'url(' + record.get('name') + ')',
                'background-repeat':   'no-repeat',
                'background-position': '3px center',
                'padding-left':        '25px'
            });
        }
    }
});

Answer 2

如果您要使用此方法并且组合框将被标记为无效，则红色条带将被隐藏，因为它被设置为背景图像，如您的自定义图标（组合将仅在红框中）。

要解决此问题，您可以收听select和validitychange个事件，并在那里设置合适的风格。

如何获取有效/无效组合的样式：

getComboBoxInputStype: function(imgPath, valid) {
            return {
                'background-image': valid ? 'url(' + imgPath + ')' : 'url(' + imgPath + '), url(../../Scripts/ext/images/grid/invalid_line.gif)',
                'background-repeat': valid ? 'no-repeat' : 'no-repeat, repeat-x',
                'background-size': valid ? '18px 18px' : '18px 18px, 4px 3px',
                'background-position': valid ? '3px center' : '3px center, bottom',
                'padding-left': '25px'
            };
        }

Answer 3

从displayTpl中删除{name}，如下所示：

displayTpl:
Ext.create('Ext.XTemplate',
  '<tpl for=".">',
  '{abbr}',
  '</tpl>'
),

如何在extjs 4.1中使用包含图像的组合

3 个答案: