Ext.form.ComboBox的setValue()问题

在使用Ext.form.ComboBox的时候,经常遇到的场景是:首先用store查询到一批数据,这些数据用grid进行显示,比如:

image

然后选择某一条数据,切换到详细信息显示页面,详细信息显示页面只显示被选择的一条数据。比如:

image

这个时候就涉及一个问题,当切换到详细页面的时候,需要将被选择记录的相应字段的内容设置到详细页面的输入框中。如果要设置的内容是comboBox控件,则可以使用setValue()方法设置,但是有一个前提就是这个comboBox控件连接的store必须是打开的否则,设置以后只看到代码没看到描述信息,比如下图的民族和省县。

image

如何解决这个问题?

查看comboBox的setValue()代码

setValue : function(v){
var text = v;
if(this.valueField){
var r = this.findRecord(this.valueField, v);
if(r){
                text = r.data[this.displayField];
}else if(this.valueNotFoundText !== undefined){
                text = this.valueNotFoundText;
}
}
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
return this;
},

要设置VALUE则必须能够在STORE中找到这个VALUE对应的记录,否组直接显示VALUE,这个问题其实很糟糕,如果这个下来列表的内容很多,比如有几千条,一般的做法就是采用动态加载的方法,这样的结果就是在切换的时候对应的STORE还是关闭的,即使加载也是采用分页的方法,不可能把几千条记录都全部加载下来,所以在这种情况下就和麻烦。

要解决这个问题可以从comboBox中继承一个类,增加一个设置值的方法;

比如:

lucene.com.ComboBox = Ext.extend(Ext.form.ComboBox, {
    setValueEx : function(v, Atext){
    var text = Atext;
    Ext.form.ComboBox.superclass.setValue.call(this, text);

    this.lastSelectionText = text;
    if(this.hiddenField){
        this.hiddenField.value = v;
    }
    this.value = v;
    return this;
}
});

这个方法增加了一个setValueEx方法,这个方法传入value和text,直接设置。当然根据需要也可以重载setValue()方法。
原文地址:https://www.cnblogs.com/barryhong/p/1618602.html