ExtJS的上拉选单Combobox中空选项的高度有关问题
ExtJS的下拉选单Combobox中空选项的高度问题
ExtJS的下拉选单组件Combobox如果有空选项时，会有空选项高度太小的问题，如下图：
解决方法是为Combobox的tpl属性设置template string，并在该template string中添加高度样式定义，例如：
注意{name}要和displayField的值一致。
修改后效果如下：
也可以用在{name}后加空字符的方法提供一个假的空白选项，例如：
这样只是在显示渲染的时候在选项后加空字符，不会影响传递到后台的选项数据。
最后，也可以在页面上用css统一规定下拉单选项高度：
可以根据具体项目需求和页面代码结构选择最合适的方法。
ExtJS的下拉选单组件Combobox如果有空选项时，会有空选项高度太小的问题，如下图：
解决方法是为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的值一致。
修改后效果如下：
也可以用在{name}后加空字符的方法提供一个假的空白选项，例如：
tpl:'<tpl for=".">' +
'<div class="x-combo-list-item" >' +
'{name} ' +
'</div>'+
'</tpl>'
这样只是在显示渲染的时候在选项后加空字符，不会影响传递到后台的选项数据。
最后，也可以在页面上用css统一规定下拉单选项高度：
.x-combo-list-item { height: 21px;}
可以根据具体项目需求和页面代码结构选择最合适的方法。
1 楼
freeren
2011-11-10
2 楼
LonelySnoopy
2012-04-17
[color=darkred]dfg[/color]