后台取不到extJs2.3的comboBox手写输入的值

      在用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等等都会有这种问题.......

 

 

评论

1 楼 z390174504 2014-07-25  

不错啊...ID和hide不能一样，多谢