ExtJS的下拉选单Combobox中空选项的高度问题

ExtJS的下拉选单组件Combobox如果有空选项时，会有空选项高度太小的问题，如下图：
[img]http://dl.iteye.com/upload/attachment/350771/6899a68a-62ee-3b3d-b020-a9c74c505e80.png[/img]

解决方法是为Combobox的tpl属性设置template string，并在该template string中添加高度样式定义，例如：

new Ext.form.ComboBox({
	name: 'gender',
	triggerAction: 'all',
	editable: false,
	disabled:false,
	mode: 'local',
	displayField: 'name',
	valueField: 'value',
	store:genderStore,
	tpl:'<tpl for=".">' +
	        '<div class="x-combo-list-item" style="height:12px;">' +
		    '{name}' +
		'</div>'+
	    '</tpl>'
})

注意{name}要和displayField的值一致。

修改后效果如下：
[img]http://dl.iteye.com/upload/attachment/350794/3757d519-4368-3b49-896d-a8d404e4572e.png[/img]


也可以用在{name}后加空字符的方法提供一个假的空白选项，例如：

tpl:'<tpl for=".">' +
	'<div class="x-combo-list-item" >' +
            '{name} ' +
	'</div>'+
    '</tpl>'

这样只是在显示渲染的时候在选项后加空字符，不会影响传递到后台的选项数据。

最后，也可以在页面上用css统一规定下拉单选项高度：

.x-combo-list-item { height: 21px;}

可以根据具体项目需求和页面代码结构选择最合适的方法。 :lol: