关闭

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

标签: extjs前端开发java数据结构stringclass
1796人阅读 评论(0) 收藏 举报
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. })  

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

修改后效果如下:



也可以用在{name}后加空字符的方法提供一个假的空白选项,例如:
Java代码 复制代码 收藏代码
  1. tpl:'<tpl for=".">' +   
  2.     '<div class="x-combo-list-item" >' +   
  3.             '{name}&nbsp;' +   
  4.     '</div>'+   
  5.     '</tpl>'  

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

最后,也可以在页面上用css统一规定下拉单选项高度:
Java代码 复制代码 收藏代码
  1. .x-combo-list-item { height: 21px;}  


可以根据具体项目需求和页面代码结构选择最合适的方法。
  • 大小: 3.6 KB
  • 大小: 3.6 KB
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:24439次
    • 积分:279
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:16篇
    • 译文:0篇
    • 评论:0条
    文章分类