[原创] Ext extend Ext.form.ComboBox异步数据的下拉框控件
程序员文章站
2022-07-13 22:33:25
...
在项目工程中,要对一张字典表的数据进行查询,以下拉框的形式在界面展示。
需要在添加记录、更新记录的时候用到(需要设置combox的初始值),实现了一下扩展。
添加时设置了value的效果
[img]http://dl.iteye.com/upload/attachment/252205/6aff5583-985e-3966-9dc8-557c0cbe5809.jpg[/img]
更新时设置值的效果
[img]http://dl.iteye.com/upload/attachment/252207/8ec8b573-59c8-3ddb-862f-d2ee366428a3.jpg[/img]
需要在添加记录、更新记录的时候用到(需要设置combox的初始值),实现了一下扩展。
添加时设置了value的效果
[img]http://dl.iteye.com/upload/attachment/252205/6aff5583-985e-3966-9dc8-557c0cbe5809.jpg[/img]
更新时设置值的效果
[img]http://dl.iteye.com/upload/attachment/252207/8ec8b573-59c8-3ddb-862f-d2ee366428a3.jpg[/img]
组件扩展:
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
}