如何使用extjs 4.1中内部包含图像的组合 [英] How to work with combo having images inside in extjs 4.1

问题描述

我尝试用图像(或其他)创建一个组合，并且当我选择一个选项时，组合中的值会有一些选择.

I try to create a combo with an image (or something else) and when I choose an option, value in combo has some options.

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

I create a combo box look like:

但是当我选择一个看起来像这样的选项时:

But when I choose an option that looks like:

这是我的代码 http://jsfiddle.net/QZqeK/

Here is my code http://jsfiddle.net/QZqeK/

// 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()
});

该如何解决?谢谢！

推荐答案

您将无法使用模板解决此问题.ComboBox的显示值用作文本输入字段的值，这就是为什么您的HTML可以按原样显示的原因.

You won't be able to solve this with templates. The display value of a ComboBox is used as the value of the text input field, which is why your HTML is displayed literally.

这可能有点骇人听闻，但您可以侦听 select 事件并直接在 inputEl 上更新某些样式.

It might be kind of hackish, but you can listen for the select event and update some styles directly on the inputEl.

请注意，此样本为近似值.您可能需要尝试才能达到预期的效果.

Note that this sample is an approximation. You may have to experiment to get the desired effect.

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'
            });
        }
    }
});

这篇关于如何使用extjs 4.1中内部包含图像的组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！