解决Extjs中Combobox显示值和真实值赋值问题

用过Extjs的朋友相信都知道在Extjs的Combobox组件中是由两个值来组成的。一个是displayField这个是用来显示给我们看 的,而另一个是真正给系统用的valueField,举个例子会更贴切一点。假如我们有一个下拉列表是公司选择,那我们看到的option中的值应该是公 司的名称,而实际提交给系统的值可能是公司的ID或者编码之类的。而Extjs中的combobox也是同样的道理,但是它只提供了一个 setValue()函数,我们在调用的时候发生的结果就是要么显示的值和真实的值同是id,或者同是名称。虽然同是id的时候系统可以正常运行,但这样 用户交互就显示的友好了。相信大家都不明白你的1,2,3,代表首什么。

  在网上查了一下,有的朋友说可以用setvalue()/setRawValue( Mixed value ) 来分别完成,事实上我试了一次并没有成功。查了下API中的解释。

setRawValue( Mixed value ) : Mixed
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValu...
跃过验证直接设置DOM元素值。需要验证的设值方法可以查看setValue。Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see setValue.

  如果我没有理解错的话这里应该是用于跳过验证赋值的,也就是说你本来有些因为验证不能通过的值可以通过这个函数来设置。(这里搞不懂为什么Ext官方会给这样一个函数,既然都是不能验证的那干嘛还要赋值)。

  在使用firebug分析生成的页面的时候,发现真实的值是用一个隐藏的input来放置的。既然这样那我就用Ext.get()方法来试试,最终发现确实可以使用Ext.get()和form.getForm().findField()来分别赋值,考虑Ext.get()会造成新的内存损耗,故使用Ext.fly()代替,最终代码如下:

    win.form.getForm().findField('assistInfo.pid.id')
        .setValue(config.curr.node.text);
    Ext.fly('assistInfo.pid.id').dom.value=config.curr.node.id;

2010-10-08 最新修改,以上这个方法还是有个问题。当你的 cbx获得焦点而又没有修改的时候,在离开时会将你的displayField的值填充给valueField这样的话同样会造成系统错误。而较好的解决 办法为:使用Ext.data.Record.create({})去构建一个combobo的数据对象,并将这个值填充到combobo的 dataStore中,最后再调用setvalue这样就可以完美地解决combobox初始值的问题了。


Ext.getCmp('userid').setRawValue(otherName);
Ext.getCmp('userid').setValue(otherId);
这样可以设置默认的name 和id了


你可能感兴趣的:(解决Extjs中Combobox显示值和真实值赋值问题)