How to work with combo having images inside in extjs 4.1

故事扮演 提交于 2021-02-05 06:36:06

问题


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:

enter image description here

But when I choose an option that looks like:

enter image description here

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

How to fix that? Thanks!


回答1:


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.

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



回答2:


If you are going to use this approach and combobox will be marked as invalid the red ribbon will be hiden because it is set as background image like your custom icon (combo will be only in a red frame).

To fix this you can listen to select and validitychange events and set proper style there.

Example how to get style for valid/invalid combo:

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



回答3:


Remove {name} from displayTpl like below:

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


来源:https://stackoverflow.com/questions/19268128/how-to-work-with-combo-having-images-inside-in-extjs-4-1

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!