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

时间:2016-12-12 05:46:50

标签: javascript extjs sencha-touch sencha-architect

颜色即将到来,但我无法选择它们 { 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]

请某人帮帮我

2 个答案:

答案 0 :(得分:7)

您可以根据需要使用tpl自定义组合框模板 请检查以下小提琴:
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()
});

答案 1 :(得分:0)

如果您想更改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'));
}