[原创] Ext extend Ext.form.ComboBox异步数据的下拉框控件

在项目工程中,要对一张字典表的数据进行查询,以下拉框的形式在界面展示。
需要在添加记录、更新记录的时候用到(需要设置combox的初始值),实现了一下扩展。
添加时设置了value的效果
[原创] Ext extend Ext.form.ComboBox异步数据的下拉框控件
更新时设置值的效果
[原创] Ext extend Ext.form.ComboBox异步数据的下拉框控件


组件扩展:

Ext.namespace('Rvp.ux');

Rvp.ux.DictCombo = Ext.extend( Ext.form.ComboBox, {
		
	triggerAction : 'all' 	// 显示所有下列数据,一定要设置属性triggerAction为all
	,editable : true 		// 是否允许输入
	,typeAhead : true 		// 当输入一部分后,自动补齐为输入的部分内容
	,mode:'remote'
 	,valueField:'subId'
    ,displayField:'subName'
    
	,initComponent : function(){
		Rvp.ux.DictCombo.superclass.initComponent.apply(this,arguments);  

		// 必须设置此属性,否则提交到后台的为显示的中文text
		this.hiddenName = this.name;
		
		this.store = new Ext.data.JsonStore({
			// 貌似在new对象时设置了value会自动load,所以这里不需要load了。
			//autoLoad: this.autoLoad || false
			remoteSort : this.remoteSort || false
			,url : basePath + '/dictionaryAction.do'
			,baseParams : {
				typeCode : this.typeCode || null
				,actionConfig: this.actionConfig || 'typeCode'
				,parentId : this.parentId || 0
			}
			,root 	: 'root'
			,fields  : ['id', 'typeCode', 'parentId', 'subId', 'subName', 'memo', 'valid']
			,sortInfo: { field : 'subId', direction : 'ASC' }
		})
	}
	,setValue : function(v) {
                // 以下判断可能导致form中的重置按钮失效。
                // 如果combox的store中有value为0的值,必须要手动给该combox设置值为null(Ext.getCmp('comboxid').setValue(null))
                // 编辑时间 2010-05-20 17:51:04
		//if(!v){
		//	return;
		//}
        // 如果远程数据还没有加载,在设值之前先加载一次   
        if ( this.store.getCount() == 0 ) {
            this.store.on("load", function() {
                Rvp.ux.DictCombo.superclass.setValue.call(this, v);  
            }, this, {  
                single : false  // 此处true、false有什么区别?
            });  
            this.doQuery(this.allQuery, true);  
        } else {
			Rvp.ux.DictCombo.superclass.setValue.call(this, v);  
        }  
    }
});
Ext.reg('dictcombo', Rvp.ux.DictCombo); 

使用方式:

{
	xtype:'dictcombo'
	,typeCode : 4
	,fieldLabel : '收款方式(<font color=red>*</font>)'
	,id : 'payTypeSelect'
	,name : 'payType'
	,autoLoad: true
	,allowBlank: false
	,anchor : '95%'
	,value: 1
}

你可能感兴趣的:(ext)