在用extJs2.3做页面的时候发现将comboBox设置为可以手写输入的时候,如果输入的值在下拉选项中没有,这个值可以传到后台,如果输入的值在下拉框中存在,下拉框会自动匹配上,但是我没有选择下拉框中匹配上的值,因为我认为下拉框中已经有我输入的值了,事实上这个时候那个框框也显示我输入的值了,这时候直接点提交,后台取不到这个值(即通过request.getParameter("inputValue");取到的值是一个空字符串"")。
如下的comboBox,如果输入1,request.getParameter("inputValue")得到输入值1,
如果输入是,request.getParameter("inputValue")得到的值为"".......
new Ext.form.ComboBox({
id:'inputValue_boolean_combo',
store:new Ext.data.SimpleStore({
fields:['retrunValue','displayText'],data:[['是','是'],['否','否']]}),
valueField:'retrunValue',
displayField:'displayText',
value:'',
mode:'local',
hiddenName:'inputValue',
hideLabel:true,
triggerAction:'all',
name:'inputValue',
enableKeyEvents:true,
anchor:'100%'
});
思虑再三,我不得不给它写个监听,当失去焦点的时候,强制把输入值放到下拉框,于是无论在comboBox中输入的值在其数据源中是否存在,通过request.getParameter("inputValue")都可以取到这个值。
new Ext.form.ComboBox({
id:'inputValue_boolean_combo',
store:new Ext.data.SimpleStore({
fields:['retrunValue','displayText'],data:[['是','是'],['否','否']]}),
valueField:'retrunValue',
displayField:'displayText',
value:'',
mode:'local',
hiddenName:'inputValue',
hideLabel:true,
triggerAction:'all',
name:'inputValue',
enableKeyEvents:true,
anchor:'100%' ,
listeners : {blur : function() {
//this.value=this.el.dom.value;//这种写法也传不过去
//alert(this.value);this.setValue(this.value);//这种写法也传不过去
this.setValue(this.el.dom.value);//这种写法可以传过去
}}
});
这看似是一个很简单的问题,但页面问题有时候纠结起来,会让人痛不欲生的,所以记录一下......
顺便再啰嗦几句.......
在写comboBox组件的时候注意几点:
1.hiddenName的值千万不要跟combo的id一样,可参见ExtJs2.2的API里面关于hiddenName的说明;
当然了,hiddenId和combo的id 应该是不同的,因为两个DOM节点不应该共享同一个id。
下面是ExtJs2.2的API里面对hiddenId和hiddenName的原文说明:
hiddenId : String
如果指定了hiddenName 也可以提供一个hiddenId,以便赋予隐藏域一个唯一的id (默认值为hiddenName的值)。
hiddenId和combo的id 应该是不同的,因为两个DOM节点不应该共享同一个id。
hiddenName : String
如果指定,将自动创建一个表单隐藏域来存储输入项的值 (默认值为底层DOM元素的名称)。
如果想要在表单提交时自动提交combo的值,该配置项是必须的。
注意:如果没有指定hiddenId,隐藏域的id默认和这个名称相同。
combo的id和隐藏域的id应该不同, 因为两个DOM节点不应该共用同一个id,
所以,如果combo和隐藏域的名称相同时,你必须指定一个唯一的hiddenId。
(译者注:请特别注意这一个配置项,一般写脚本时习惯指定combo的id和hiddenName,根据这里的说明可以知道 id和hiddenName是不能相同的,否则自动创建出来的底层DOM元素就使用了同一个id,这样的话下拉选择框就渲染不出来了。当你发现你的下拉选择框出现渲染不正常时,可以先检查是不是id和hiddenName设置成一样的了。更详细的截图和描述参见这里:ComboBox的恶心显示问题 )
2.如果这个comboBox在一个panel里的话,如果使用xxxpanel.remove(xxxcombo)这种方法来remove掉这个组件的时候,记得使用xxxpanel.remove(xxxcombo,true),这样被remove掉的这个xxxcombo被移除的时候,就会自动被销毁掉,这样做一是减轻浏览器的内存开销,一则是减少程序的bug。读者不放尝试一下,给这个xxxcombo加上allowBlank:false(或者任意一个正则验证)使用使用xxxpanel.remove(xxxcombo)去掉这个xxxcombo,如果这时候需要提交表单,那么无论你如何狂点提交按钮,都没有半点反映,起初我以为是提交按钮id和页面上某个别的按钮id冲突导致,或是提交的方法和页面某个方法重名....
在提交方法 sumbmit_form里alert(xxxpanel.form.isValid())一下发现一直是false,就是因为这个被remove掉的东西没有销毁,所以表单提交的时候还会验证这个xxxcombo的数据,所以自然form是无效的,也就不会提交给struts的action了.....
我一开始是这么解决的xxxpanel.remove(xxxcombo); xxxcombo.destroy();直接给我报错了xxxcombo is undefined...于是使用xxxpanel.remove(xxxcombo,true),这样解决问题了,这里不仅仅指comboBox这种组件,所有组件如DateField、TextField、TimeField等等都会有这种问题.......