Ext ComboBox控件使用常见问题

本文详细介绍了ExtJS中ComboBox组件的常见问题及解决方法,包括数据加载错位、显示值缺失及手动输入值处理等问题,并提供了具体的配置参数说明及示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1。ComboBox加载数据之后,ComboBox里面的值跑位,不能正确对应到ComboBox里面。 
原因:因为要传name的值到服务器端,使用到了隐藏属性hiddeName来传值,hiddenName的名是要和name一样的。如果id和name设置为相同的,就会不能正确对应。所以,comboBox的id和name 不能设置一样 
new Ext.form.ComboBox({ 
id:"comboId", 
name:"comboName", 
hiddenName:"comboName" 
}); 

2。 第二个问题是明明已经加载了数据之后store里面也有值,确没有再ComboBox里面显示,这个你就要注意你的ComboBox里面有没有设置valueField 和 displayField, valueField绑定到当前底层数据,相当于它的id,displayValue,绑定到当前底层数据对应的名词,顾名思义也就是显示出来的值。还要注意一下,它的映射是否也有写,field 里面是否写正确了。如果这两个属性没有,那就是值怎么也显示不出来的。还有一点是,得到的值从服务器端传回来,一定要记得有response.getWrite().print(json格式值); 有时前台都写正确了,但是还是没值,那就是没有将值传到前台 

store : new Ext.Data.Store({           

     proxy: new Ext.Data.httpProxy({}), 

    reader:new Ext.data.JsonReader({}); 

   field:["valueid","displayName"]                  

}); 

   new Ext.form.ComboBox({ 
id:"comboId", 
name:"comboName", 
hiddenName:"comboName", 

store:store 

valueField:"valueid"  , //要跟field里面对应,不然不能正确匹配 

displayField:"dispalyField" 
}); 

3. 获取ComboBox手动输入的值。手动输入的值是没有完全设置到ComboBox中value里面的,所以当我们去获取的时候,得到都是一个空字符串。 

listeners : { 
       render : function(f) { 
        f.el.on('keyup', function(e) { 
         f.setValue(f.getRawValue()); 
         vipStore.proxy = new Ext.data.HttpProxy({ 
          url : "vip_realtimeVipName.action?vipID=" 
            + f.getRawValue() 
         }); 
         vipStore.load(); 
        }); 

       } 

  1. Ext文件  
  2. var Ptype=new Ext.data.SimpleStore({  
  3.         fields:['value''text'],  
  4.         data:[['01','咨询类'],['02','软件类'],['03','其他']]  
  5.     });  
  6.       
  7.       
  8.     var combo=new Ext.form.ComboBox({  
  9.         id:'depart',  
  10.         name:'Pptype',  
  11.         fieldLabel:'所属部门',  
  12.         emptyText:'请选择',   
  13.         anchor:'95%',  
  14.         //hiddenName:'depart_com',  
  15.         mode : 'local',   
  16.         editable: false,  
  17.         triggerAction: 'all',  
  18.         //readOnly : true,    
  19.         store:Ptype,  
  20.         valueField : 'value',  //值  
  21.         displayField : 'text'   //显示下拉框内容  
  22.         //allowBlank : false//不允许为空  
  23.         //blankText:'请选择部门'     
  24.     });  
  25.   
  26.   
  27.   
  28.   
  29. java文件  
  30.   
  31. public List selectDepatCom(){  
  32.         List list=new ArrayList();  
  33.         String sql="select * from depart";  
  34.         DBcon dbcon=new DBcon();  
  35.         try {  
  36.             PreparedStatement ps=dbcon.con.prepareStatement(sql);  
  37.             ResultSet rs=ps.executeQuery();  
  38.             while(rs.next()){  
  39.                 DepartBean db=new DepartBean();  
  40.                 db.setDepid(rs.getInt(1));  
  41.                 db.setDepname(rs.getString(2));  
  42.                 list.add(db);  
  43.             }  
  44.             rs.close();  
  45.             ps.close();  
  46.         } catch (SQLException e) {  
  47.             // TODO Auto-generated catch block  
  48.             e.printStackTrace();  
  49.         }finally{  
  50.             dbcon.closeDBcon();  
  51.         }  
  52.         return list;  
  53.     }  


最后,如果你的ComboBox控件,采用远程服务器取数据的话, mode:要采用remote,  当出现数据显示不了的话,你也可能和我犯了一样愚蠢的错误, 没有为ComboBox控件指定 triggerAction, 因为当下拉框被激活了之后,要判断该值。(all: 显示所有数据不过滤, query:过滤数据,如果是远程的话,会调用查询)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烈火蜓蜻

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值