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的下拉选单Combobox中空选项的高度问题

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

下拉选单pb

  • 2014-03-10 11:42
  • 29KB
  • 下载

下拉选单模糊查询

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

用JS实现下拉选单的联动

需求:用JS实现一个下拉选单,要求在选中“地区”选单中相应的地区时,自动在“国家”选单中 出现相应的国家。 联动菜单 地区: 请选择 亚洲 ...

改变combobox的下拉高度

改变combobox的下拉高度

flex3 comboBox 变身可输入可过滤搜索下拉选项,实例代码片段

<![CDATA[ ............... private var enterpriseInfoRO:RemoteObject=ServiceLocator.getInsta...

ExtJS ComboBox 下拉列表详细用法

原文转自起飞网:http://www.qeefee.com/article/000171 ComboBox 是ExtJS中经常用到的控件,今天我们来讲一下它的一些用法。 使用本地Store ...

Extjs4学习笔记(七)----combobox下拉动态树

combobox下拉动态树主要自定义js文件/** * 下拉树 */ Ext.define('TeaComboTreeBox', { extend: 'Ext.form.field.Co...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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