`
ll_feng
  • 浏览: 390007 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs 表单中下拉选项组件(combo)的用法

    博客分类:
  • ajax
阅读更多
{
				//cls : 'key',
				id:'noticeType',
				xtype : 'combo',
				fieldLabel : '通知类型',
				labelSeparator : ':',
				//value : '',
				multiSelect : false,
				//name: 'meetingType',
				hiddenName : 'meetingClass',
				valueField : 'dictdataCode',//'dictdataCode',
				displayField : 'dictdataName',//'dictdataName',
				store : meetingTypeDs,
				/*new Ext.data.SimpleStore({
					fields:['name','value'],
					data:[['全部','0'],['会议','meeting001'],['其它','meeting002']]
				}),*/
				//typeAhead : true,
				mode : 'local',// default: remote
				triggerAction : 'all',
				emptyText : '请选择数据项',
				//selectOnFocus : true,
				readOnly : false,
				//editable : false,
				anchor : '96%',
				listeners:{
					blur : function(combo){
						var value= Ext.getDom('noticeType').value;
						//根据手动输入值查询是否有匹配的数据
						var result = meetingTypeDs.query('dictdataName',value,true,true);
						if(result.getCount()!=1){//store没有匹配的数据,则按输入值查询

							combo.setValue(value);
						}
					}
				}
				//lazyInit : true
			}


重点说说自定义选项的添加和可编辑状态下的值同步的问题
1、可编辑状态下的值同步
有时候下拉择可能也要可编辑,即除了可选的那几个值,也可提供用户输入任意值的功能
以上代码即是这一需求的实现。思路是:
(1)为combo加上id值,这样可以获得可输入控件,是数据同步的前提
(2)将用户输入的值作为条件去store里查询,结果的数量为1表示store里有一条与用户输入的值一样,否则将用户输入的值赋给combo
(3)以上工作要在监听里执行

2、添加自定义的选择项
ext的combox很不友好,没有空值的选项。只能自己加上了
meetingTypeDs = new Ext.data.JsonStore({
		url:'dict_getDictData.action?dictCode=meeting_type',
		totalProperty : 'totalSize',
		id : 'id',
		root : 'list',
	  	remoteSort:true, 
	  	fields:["dictdataCode","dictdataName"],	//
	  	listeners:{
	  		//向已有数据中插入一条新的数据
	  		load : function(store, records, options ){
		  		var data = {'dictdataCode':'','dictdataName':'全部类型'};
		  		var rs = [new Ext.data.Record(data)];
		  		store.insert(0,rs);
	  		}
	  	}
	  	
	});


最后抱怨一下ext的combox的不足:
1、不能方便的加上自己的缺省选择项,对store的要求太多。

2、提供了一量选择一项便再也不能恢复到始状态。提供了emptyText这一属性,却不太好用,实际应用中,我们经常需要恢复到空值状态,也就是什么都不先的状态。目前2.3版的ext还无法提供
分享到:
评论

相关推荐

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

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

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

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

    extjs2.0 下拉列

    在本例中,我们将重点讨论如何在 ExtJS 2.0 中实现下拉列表功能。 下拉列表在 Web 应用程序中非常常见,通常用于提供可选的选项供用户选择。在 ExtJS 中,下拉列表可以通过创建 `Ext.form.ComboBox` 实现。这个组件...

    Extjs中常用表单介绍与应用

    本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...

    ExtJs组件类的对应表

    3. **`combo`** - `Ext.form.ComboBox`,下拉框组件,用于创建下拉选择框。 4. **`datefield`** - `Ext.form.DateField`,日期选择项,用于输入日期。 5. **`timefield`** - `Ext.form.TimeField`,时间录入项,...

    extjs中的xtype的所有类型介绍

    ExtJS 中的 xtype 是一个非常重要的概念,它用于定义组件的类型,从而确定组件的行为和样式。xtype 是 ExtJS 的核心组件之一,它提供了大量的组件类型,满足不同场景下的需求。 基本组件 1. button - xtype: '...

    extjs4.2 分页combo动态条数 源码

    Combobox是EXTJS中的一种表单字段,它结合了文本输入框和下拉菜单,允许用户从预定义的选项列表中选择一个值。默认情况下,所有的选项都会被加载到下拉菜单中,但通过添加分页功能,我们可以将大列表拆分成小块,...

    EXTJS修改颜色实例源码

    - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单的组件,它允许你添加各种表单元素如文本框、选择框等。 - 在实例中,`title` 属性定义了面板的标题,`frame` 为真表示面板具有边框,`plain` 设置为真让边框更...

    extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

    总结来说,此代码段展示了EXTJS中如何创建一个具有交互性的表单,包括下拉列表的使用、事件监听、表单验证以及动态改变组件状态的方法。这种技术在Web应用中常用于实现用户界面的动态交互和数据验证,以提高用户体验...

    Extjs4 combogrid扩展

    这些标签指明了我们正在处理的是ExtJS 4版本,涉及到了Combo和Grid两个核心组件,以及对它们进行扩展的方法。 在提供的压缩包文件中,有三个文件: 1. **GridComboBox.js**:这个文件很可能是实现combogrid扩展的...

    ExtJs xtype一览

    - **`combo` (Ext.form.ComboBox)**: 下拉框组件,提供了一个下拉列表供用户选择。 - **`datefield` (Ext.form.DateField)**: 日期选择项组件,用于输入日期值。 - **`timefield` (Ext.form.TimeField)**: 时间录入...

    extJs xtype 类型

    3. **`combo`:** 下拉框组件,用于创建下拉列表,通过`Ext.form.ComboBox`类实现。 4. **`datefield`:** 日期选择项组件,用于让用户选择日期,通过`Ext.form.DateField`类实现。 5. **`timefield`:** 时间录入项...

    很不错的ExtJs PPT

    EXTJS中的组件多样,例如下拉列表有两种形式:Select和Combo。Select仅提供预设选项,而Combo则更强大,可以动态加载数据,甚至支持远程获取数据,并且无需刷新页面即可填充内容。EXTJS还提供了一款灵活的时间控件,...

    EXTJS多选下拉框

    6. **使用组件**:在EXTJS的视图(View)或面板(Panel)中,你可以像使用其他组件一样实例化lovcombo,并将其添加到布局中。记得在需要的时候调用`render`方法使其在页面上显示。 7. **事件监听**:EXTJS支持丰富...

    extjs editgrid combobox 回显

    而`ComboBox`则是一种下拉列表组件,用于提供一系列选项供用户选择。当这两种组件结合在一起时,可以实现用户在下拉列表中选择数据后,该数据能够在网格中实时更新显示的功能,即所谓的“回显”。 #### 2. **实现...

    ExtJS 下拉多选框lovcombo

    lovcombo(List of Values Combo)组件是ExtJS中用于实现列表选择的一个强大工具。它不仅支持单选,还能够实现多选功能,非常适合用来构建复杂的表单界面。通过配置lovcombo的数据源(store)和响应事件(select),可以...

    ExtJS扩展:lovcombo(已解决Bug版)

    在这些组件中,`lovcombo`(Love Combo)是一个特殊的下拉框组件,它结合了下拉列表和多选功能,常用于数据关联选择。 `lovcombo`的全称为“联动下拉组合框”,它的核心功能是实现两个或多个下拉框之间的数据联动,...

    ExtJS的xtype列表

    `xtype` 是ExtJS中的一个重要概念,它是组件类的简写形式,用于在配置对象中声明组件类型,使得代码更加简洁。理解并掌握ExtJS的各种`xtype`可以帮助开发者快速构建复杂的用户界面。 1. **基本组件**: - `button`...

    Extjs xtype集合

    在Extjs开发过程中,`xtype`(扩展类型)是极为重要的一个概念。它实际上是一种类型标识符,用于快速创建特定类型的组件实例。通过使用预定义的`xtype`值,开发者可以方便地构建出各种复杂的用户界面而无需编写大量...

    ExtJs6.2中包含文本及时间选择框的自定义查询控件的解决方案

    在`view.js`中,我们使用`initComponent`方法来初始化组件,并设置初始状态。这里的关键是`selecttime`方法,它将在用户选择不同查询条件时被触发。 ```javascript // 初始化组件 me.getViewModel().set("showtime...

Global site tag (gtag.js) - Google Analytics