EXTJS中下拉框Combox（鼠标、上下键）移动背景色

下拉框列表背景色修改

设置下拉框各行颜色后，默认的移动样式背景色Class被设置的颜色Style覆盖，移动鼠标或者上下键时，存在bug，并且显示的样式不是很好区分。

Ext.form.ComboBox修改selectedClass

.x-combo-list .x-combo-selected2{
	border:1px dotted !important;
    cursor:pointer;
}
.x-combo-list .x-combo-selected2{
	border-color:#a3bae9 !important;
    background-color:#E0FFFF !important;
}

用于selectedClass的CSS样式

	var tmpCombo = new Ext.form.ComboBox({
		id : arguments[0]
		,fieldLabel : arguments[1]
		,store : new Ext.data.Store({
			proxy: new Ext.data.HttpProxy({
				//Data内容省略，保密哈
			}),
			reader: new Ext.data.JsonReader({
				root: 'record',
				totalProperty: 'total',
				idProperty: 'ID'
			}, 
			[
				{name: 'ID', mapping: 'ID'}
				,{name: 'xxx', mapping: 'xxx'}
				,{name: 'xxxx', mapping: 'xxxx'}
				,{name: 'color', mapping: 'color'}
			])
		})
		,minChars : 100
		,queryDelay:1
		,typeAhead : false
		,selectedClass:'x-combo-selected2' 
		,tpl: new Ext.XTemplate(
			'<table style="border-bottom:1px #BDBDBD solid;font-size:18px;">',
				'<thead align="center"><tr>',
					//'<th align="center" width="5%">ID</th>',
					'<th style="font-size:22px;font-weight:bold;" align="center" width="20%">xxx</th>',
					'<th style="font-size:22px;font-weight:bold;" align="center" width="12%">xxx</th>',
					'<th style="font-size:22px;font-weight:bold;" align="center" width="68%">xxx</th>',
				'</tr></thead>',
				'<tbody>',
					'<tpl for=".">',
						//'<tr {[this.colEvent(values.color)]} style="background-color: class="x-combo-list-item" >',
						'<tr style="background-color:{color}" class="x-combo-list-item" >',
							//'<td style="font-size:18px;" align="center">{[xindex]}</td>',
							'<td style="font-size:22px;font-weight:bold;" align="left">{xxx}</td>',
							'<td style="font-size:22px;font-weight:bold;" align="left">{xxxx}</td>',
							'<td style="font-size:20px;font-weight:bold;" align="left">{xxxx}</td>',	
						'</tr>',
					'</tpl>',
				'</tbody>',
			'</table>'
		)

记在最后

!important可用于控制背景颜色是否被style覆盖
翻看框架代码比较麻烦，希望这篇文章能够帮助到别人！