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

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

博客分类：
• Web前端开发

EXTCSS数据结构

ExtJS的下拉选单组件Combobox如果有空选项时，会有空选项高度太小的问题，如下图：


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

Java代码  

1. new Ext.form.ComboBox({   
2.     name: 'gender',   
3.     triggerAction: 'all',   
4.     editable: false,   
5.     disabled:false,   
6.     mode: 'local',   
7.     displayField: 'name',   
8.     valueField: 'value',   
9.     store:genderStore,   
10.     tpl:'<tpl for=".">' +   
11.             '<div class="x-combo-list-item" style="height:12px;">' +   
12.             '{name}' +   
13.         '</div>'+   
14.         '</tpl>'  
15. })  

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}后加空字符的方法提供一个假的空白选项，例如：

Java代码  

1. tpl:'<tpl for=".">' +   
2.     '<div class="x-combo-list-item" >' +   
3.             '{name}&nbsp;' +   
4.     '</div>'+   
5.     '</tpl>'  

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

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

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

Java代码  

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

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

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

• 
• 大小: 3.6 KB

• 
• 大小: 3.6 KB