How to add colours to combobox in extjs with names

Question

colours are coming but i cant select them { 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]

please someone help me

http://stackoverflow.com/users/5093834/ajay-thakur – Salman hassan Dec 12 '16 at 09:01 — Salman hassan, Dec 12 '16 at 09:01

score 8 · Answer 1 · answered Dec 12 '16 at 06:57

8

You can use tpl for customize your combobox template according to your requirement.
Please check below 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()
});

answered Dec 12 '16 at 06:57

Ajay Thakur

1,066
7
23

please help i cant select them i am using extjs 6 – Salman hassan Dec 12 '16 at 09:06
i edit above question watch my code i can't select values in combobox it just like css – Salman hassan Dec 12 '16 at 10:14
you want to select color also in display field when select any value...? – Ajay Thakur Dec 12 '16 at 11:00
look when i open combo i cant even select any of them data and colors are good store is ready but i dont know why its cant working i wasted 3 hours but no result ;) – Salman hassan Dec 12 '16 at 11:08
please tell me which version of extjs are you using – Ajay Thakur Dec 12 '16 at 11:21

score 0 · Answer 2 · answered Jan 21 '17 at 18:01

if you want to change the color in the combo add on change listener and do this

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

How to add colours to combobox in extjs with names

2 Answers2