最近碰到一个问题,有一个combobox,下拉的选项是从服务器读取的,我想在修改操作的时候,能够根据值自动匹配
使用了setValue()方法,
现在的问题是,页面第一次进入的时候,文本框中显示的是 valueField的值,不是displayField中对应的文本.
但是以后的显示都是正常的(只要不重新刷新页面)
原因在一开头没有focus就return了
查了一下ComboBox的源码,其中onLoad事件是这样写的:
onLoad : function(){
if(!this.hasFocus){
return;
}
需要扩展下就可以解决这个问题.
代码如下:
Ext.namespace('ux');
Ext.ux.DefaultingComboBox = function(config) {
Ext.ux.DefaultingComboBox.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.DefaultingComboBox, Ext.form.ComboBox, {
setValue : function(v) {
// 如果远程数据还没有加载,在设值之前先加载一次
if (this.mode == 'remote' && this.store.getCount() == 0) {
this.store.on("load", function() {
Ext.ux.DefaultingComboBox.superclass.setValue.call(this, v);
}, this, {
single : true
});
this.doQuery(this.allQuery, true);
} else {
Ext.ux.DefaultingComboBox.superclass.setValue.call(this, v);
}
}
});
使用方法:
将代码复制到你的js中,combo不需要修改,只需要写成如下就可以解决问题.
new Ext.ux.DefaultingComboBox({
xtype : 'combo',
fieldLabel : '车牌号码',
allowBlank : false,
triggerAction : 'all',
forceSelection : true,
store : clbmStore,
id : 'clmc',
//mode : 'local',//不能使用mode=local
lazyRender :true,
readOnly : true,
loadingText : '正在加载中...',
valueField : "dm",
hiddenName : 'pbp.clbm',
displayField : "mc",
emptyText : '请选择...',
name : 'pbp.clbm',
anchor : '95%'
}),