解决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来放置的。<input type=”hidden” id=”assistInfo.pid.id” name=”assistInfo.pid.id” value=”9″>既然这样那我就用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了



本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/archive/2011/11/12/2246460.html,如需转载请自行联系原作者

目录
相关文章
|
JavaScript
js通过input框输入属性和值,改变div的属性
js通过input框输入属性和值,改变div的属性
119 0
|
4月前
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
5月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
763 1
|
7月前
|
XML JSON 移动开发
BpmnJS 元素属性的updateProperties 和updateModdleProperties的属性更新区别
BpmnJS 元素属性的updateProperties 和updateModdleProperties的属性更新区别
244 1
|
7月前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
163 2
|
7月前
|
JavaScript 前端开发
jquery怎么给循环出来的列表(类似于text框)取值和赋值
jquery怎么给循环出来的列表(类似于text框)取值和赋值
40 0
jquery怎么给循环出来的列表(类似于text框)取值和赋值
|
JavaScript 前端开发 API
Element表格和表单字典转换(静态和动态)(下)
Element表格和表单字典转换(静态和动态)(下)
195 0
|
JavaScript Java 关系型数据库
Element表格和表单字典转换(静态和动态)(上)
Element表格和表单字典转换(静态和动态)(上)
555 0
|
存储 JavaScript 前端开发
JavaScript中的原始值与引用值
原始值与引用值 在JavaScript中包含两种不同类型的数据:原始值和引用值 原始值 :是指不包含任何引用的值(简单值),比如数字、字符串、布尔值、null和undefined。 引用值 :是指包含了一个引用的值,比如对象、数组、函数和方法。
|
JavaScript 前端开发 API
【千方百计】更改绑定的数据对象数值后,DOM重新渲染的4种方法
【千方百计】更改绑定的数据对象数值后,DOM重新渲染的4种方法
309 0
【千方百计】更改绑定的数据对象数值后,DOM重新渲染的4种方法