`
ll_feng
  • 浏览: 383049 次
  • 性别: 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还无法提供
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics