javascript - 如何使用名称向extjs中的组合框添加颜色

Question

颜色来了，但我不能选择它们 { xtype: 'combobox', anchor: '100%', fieldLabel: 'Mild Color', forceSelection: true, typeAhead : true, name: 'mildColor', valueField: 'id', bind: { store: '{mildcolor}' }, tpl: [ '<ul>', '<tpl for=".">', '<li style="background-color:{name}">{text}</li>', '</tpl>', '</ul>' ],<br/> }

[ /image/DObF7.png]

请有人帮助我

Answer 1

您可以根据需要使用 tpl 来自定义您的组合框模板。
请检查以下 fiddle :
https://fiddle.sencha.com/#view/editor&fiddle/1m9r

    // The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
            "abbr": "AL",
            "color":"#E20404",
            "name": "Alabama"
        }, {
            "abbr": "AK",
            "color":"#B2FC00",
            "name": "Alaska"
        }, {
            "abbr": "AZ",
            "color":"#2719F7",
            "name": "Arizona"
        }
        //...
    ]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    tpl: [
        '<ul class="x-list-plain">',
        '<tpl for=".">',
        '<li class="x-boundlist-item listItmes" style="background-color:{color}">{name}</li>',
        '</tpl>',
        '</ul>'
    ],
    renderTo: Ext.getBody()
});