`

ExtJs的ComboBox加空选项时,选项高度的问题

 
阅读更多

为ExtJS的Combobox下拉列表增加空选项后,空选项的高度比较小。


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的值一致。
修改后效果如下:
ExtJs的ComboBox加空选项时,选项高度的问题 - 红豆小生 -
也可以用在{name}后加空字符的方法提供一个假的空白选项,例如:
tpl:'<tpl for=".">' +
	'<div class="x-combo-list-item" >' +
            '{name}&nbsp;' +
	'</div>'+
    '</tpl>'
这样只是在显示渲染的时候在选项后加空字符,不会影响传递到后台的选项数据。
最后,也可以在页面上用css统一规定下拉单选项高度:
.x-combo-list-item { height: 21px;}
分享到:
评论

相关推荐

    extjs表单中的下拉框(comobobox)手动添加空选项

    ### ExtJS表单中的下拉框(ComboBox)手动添加空选项 在开发Web应用程序时,ExtJS 是一个非常强大的库,它提供了丰富的组件和API来帮助开发者构建复杂的用户界面。其中一个常用的组件就是`ComboBox`(组合框),它...

    extjs4 ComboBox 点击下拉框 出现grid效果

    ComboBox的默认行为是弹出一个包含选项的列表,而你想要实现的是当用户点击下拉按钮时,展示一个Grid,这样可以展示更多的信息并且支持更复杂的交互。这种自定义的行为需要对EXTJS4的事件处理和组件嵌套有深入的理解...

    extjs 自动补全 模拟combobox

    EXTJS并没有直接提供一个名为"自动补全"的组件,但它可以通过模拟Combobox组件来实现这一效果。Combobox是EXTJS中的一个下拉选择框,它可以显示一个下拉列表供用户选择,同时也可以配合自动补全功能。 首先,让我们...

    Ext combobox 下拉多选框带搜索功能

    结合“带搜索功能”的描述,我们可以推断出这是一个定制的ComboBox,它增加了实时搜索功能,用户在输入框中输入文本时,下拉列表会动态过滤出匹配的选项。 实现这样的功能通常涉及到以下关键点: 1. **配置多选**...

    ExtJS Combobox二级联动列子

    ExtJS的Combobox组件是一种常见的数据输入控件,它提供了下拉列表的功能,用户可以选择列表中的一个选项或者在输入框中自由输入。在实际应用中,我们常常会遇到需要实现二级甚至多级联动的场景,这通常是由于数据的...

    extJs ComboBox级联

    级联ComboBox意味着两个或多个ComboBox之间存在关联,当用户在一个ComboBox中做出选择时,它会更新另一个ComboBox的选项,展示与当前选择相关的数据。 实现ExtJS ComboBox级联的关键在于理解其数据绑定和事件监听...

    extjs editgrid combobox 回显

    在探讨“extjs editgrid combobox 回显”这一主题时,我们主要关注的是如何在ExtJS框架下,实现编辑网格(EditGrid)中的组合框(ComboBox)的值能够正确地回显到网格中。这一功能对于那些需要用户在表单中选择数据...

    extjs3.x combobox智能联想

    在EXTJS 3.x版本中,Combobox是一个非常实用的组件,它提供了下拉列表功能,用户可以在输入框中输入文字,系统会根据输入内容自动进行模糊匹配,给出相关的建议选项。这种功能在数据筛选、搜索或者选择项较多时特别...

    EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf

    总结来说,EXTJS的ComboBox级联实现涉及了Store、Proxy、JsonReader、事件监听以及ComboBox的配置选项。通过合理设置这些组件和属性,可以构建出具有动态联动效果的下拉菜单,同时确保在数据提交时正确地传递选定的...

    extjs的ComboBox 2级联动

    当一级选择改变时,我们需要更新二级ComboBox的store,使其只显示与选定的一级选项相关的数据。 以下是一个简单的步骤来实现这个功能: 1. **创建数据模型**:定义两个数据模型,分别对应一级和二级选项。例如,...

    无废话ExtJs 教程十[下拉列表:Combobox]

    本教程将深入探讨ExtJS中的Combobox组件,包括其基本用法、配置选项、事件处理和自定义功能。 1. **Combobox的基本结构** - Combobox由两个主要部分组成:文本输入框和下拉列表。用户可以在输入框中键入文字,或者...

    #ComboBox自动补全小技巧(模糊查找)

    - 在处理用户输入时,注意防止SQL注入等安全问题。 - 及时清理不必要的资源,如不再使用的Regex实例。 通过以上步骤,你可以为你的C# .NET应用程序中的ComboBox添加自动补全和模糊查找功能,提升用户交互体验。在...

    在combobox控件中添加图标

    首先在窗体中添加一个comboBox1和一个imageList(本例中带有三个图片) this.comboBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawFixed;

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    在ExtJS 3.4.0版本中,多选下拉框(Multiselect Combobox)是一种常见的用户界面组件,用于提供多个选项供用户选择。这个功能增强了标准的单选下拉框,允许用户同时选择多个条目,通常通过复选框实现。在描述中提到...

    模仿extjs风格写的jquery combobox

    标题中的“模仿extjs风格写的jquery combobox”指的是一个基于jQuery的下拉选择框组件,它的设计灵感来源于ExtJS库的ComboBox控件。ExtJS是一款功能丰富的JavaScript框架,以其强大的组件化和数据绑定机制著名,而...

    Extjs让combobox写起来简洁又漂亮

    其中,Extjs的combobox组件是一个常用的UI控件,它集成了文本输入和下拉列表,允许用户在有限的空间内快速选择一个选项。 在Extjs中,创建一个简洁又漂亮的combobox组件主要包括以下几个关键点: 1. 创建自定义...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...

    Ext带图标Combobox

    实现这个功能通常需要自定义Combobox的模板,添加图标占位符,并在数据加载时为每个选项指定相应的图标。 **3. 自定义模板** Ext JS的模板系统是通过XTemplate实现的,它支持动态渲染HTML。在创建IconCombobox时,...

    无废话ExtJs 系统教程十九[动态复选框:RemoteCheckboxGroup]

    ExtJS提供了丰富的API和配置选项,让你能够灵活地调整组件的行为。 总之,"无废话ExtJs 系统教程十九[动态复选框:RemoteCheckboxGroup]"是一个帮助开发者掌握如何在ExtJS应用中实现动态复选框组件的资源。通过学习...

    Extjs中ComboBox加载并赋初值的实现方法

    在实际应用中,我们常常需要在ComboBox加载完数据后设置其初始值,以确保用户看到的是正确的预设选项。本文将详细解释如何在EXTJS中实现ComboBox的加载并赋初值。 首先,我们需要理解ComboBox的基本结构。ComboBox...

Global site tag (gtag.js) - Google Analytics