2

画像 (またはその他のもの)を使用してコンボを作成しようとしましたが、オプションを選択すると、コンボの値にいくつかのオプションがあります。

次のようなコンボボックスを作成します。

ここに画像の説明を入力

しかし、次のようなオプションを選択すると:

ここに画像の説明を入力

ここに私のコードがあります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()
});

それを修正する方法は？ありがとう！

4

3 に答える 3

6

これはテンプレートでは解決できません。ComboBox の表示値は、テキスト入力フィールドの値として使用されます。これが、HTML が文字どおりに表示される理由です。

ちょっとハックかもしれませんが、イベントをリッスンして、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'
            });
        }
    }
});
于 2013-10-09T14:17:13.720 に答える