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