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

转载 2012年03月30日 00:16:23
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

extjs 下拉框增加空选项

//数据字典下拉控件 Ext.ns('uc'); uc.cboDic = function (config) { var storeDic = Ext.create('Ext.data.S...

extjs Combobox添加空行

{ fieldLabel: '所属医院', xtype: 'combobox', name: 'hospitalId', labelWidth:60, editabl...

Extjs Combobox 高度设置

//需要在listcoinfig中配置,本身的maxHeight不起作用 Ext.onReady(function() { var testStore = Ext.create('Ext.da...

如何设置 ComboBox 下拉列表的高度或间距

ComboBox 的下拉列表部分总是很挤,看起不舒服,但是设置了 ItemHeight 没用,怎么办呢? 首先设置一个较大的 ItemHeight 值,比如 20; 然后设置 ComboBox 的...
  • smeller
  • smeller
  • 2012年04月10日 18:09
  • 16264

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

ExtJS的下拉选单组件Combobox如果有空选项时,会有空选项高度太小的问题,如下图: 解决方法是为Combobox的tpl属性设置template string,并在该temp...

extjs中combo组件的100%宽度设置

关于一个表单布局中使用百分比对表单项进行布局处理已经不是什么新鲜事了,因为表单布局继承自anchor布局,而这种布局天生就支持百分比参数,所以很容易实现此功能,但是由于我对表单的默认布局总觉得使用起来...

JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载

JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载 JDK(Java Development Kit,Java开发包,Java开发工具)是一个写Java的apple...

用JS实现下拉选单的联动

需求:用JS实现一个下拉选单,要求在选中“地区”选单中相应的地区时,自动在“国家”选单中 出现相应的国家。 联动菜单 地区: 请选择 亚洲 ...
  • dumzp13
  • dumzp13
  • 2016年04月05日 22:47
  • 160

下拉选单模糊查询

我所用的软件是vs2015 首先要下载插件,然后在HTML页引用   插件地址 http://pan.baidu.com/s/1ceLL18 下拉选单模糊查询...

改变combobox的下拉高度

  • 2004年05月10日 00:00
  • 5KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJS的下拉选单Combobox中空选项的高度问题
举报原因:
原因补充:

(最多只允许输入30个字)