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;}
可以根据具体项目需求和页面代码结构选择最合适的方法。
- 大小: 3.6 KB
- 大小: 3.6 KB
分享到:
相关推荐
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
extjs下拉树
Extjs 下拉列表
extjs 自动补全,模拟下拉列表combobox
extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显
NULL 博文链接:https://huiqinbo.iteye.com/blog/2216788
NULL 博文链接:https://dengli19881102.iteye.com/blog/1046190
功能:extjs4 下拉菜单树 combobox+tree 支持单选多选等 收集两款,仅需要1分。
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
extjs实现的下拉树的核心代码,包括js,jsp,对有需要的同仁提供参考与学习之用
NULL 博文链接:https://init-since.iteye.com/blog/2095766
下拉框中要添加一项 ’所有‘ ,由于是combox无法使用option
Extjs 下拉菜单实现拼音输入进行检索
EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf
extJs4 ComboBox 代码组合框实例,ComboBox 各个主要参数详细解释
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下: 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....
此处做一个extjs下拉列,以备后用。该项目中包涵使用说明,将项目下载下来按照使用说明即可。 本人也是extjs的初学者,有不足之处希望使用该资源的兄弟姐妹指出,希望对大家有帮助。
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...