Как добавить цвета в выпадающий список в 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>' ],
}

[https://i.stack.imgur.com/DObF7.png]

пожалуйста, кто-то поможет мне

Answer 1

Вы можете использовать TPL для настройки шаблона COMBOBOX согласно вашему требованию.
Пожалуйста, проверьте ниже скрипкой:
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() 
}); 

Answer 2

, если вы хотите изменить цвет в combo добавить на change слушателя и сделать это

changeHandler: function(combo, nVal, oVal) { 
    var oRec = combo.findRecordByValue(oVal), nRec = combo.findRecordByValue(nVal); 
    oRec && combo.inputEl.removeCls(oRec.get('cls')); 
    nRec && combo.inputEl.addCls(nRec.get('cls')); 
}