[转]Ext ComboBox 默认选中某一项

Posted 2020-06-27 Chobits

原文地址:http://blog.csdn.net/liuguxing/article/details/8623190

[javascript] view plain copy

1. 项目中经常用到选择框，需要从后台异步加载数据，可单独写一个组件进行加载  

[javascript] view plain copy

1. App.ComboBox = function(combo){  
2.     var comboBox = new Ext.form.ComboBox({  
3.         store:new Ext.data.JsonStore({    
4.             autoLoad : false,                                   //设置为false，自己控制什么时候加载数据  
5.             url:__ctxPath+"/code/get.do?name="+combo.codeName,    
6.             root: ‘data‘,               
7.             fields :  [‘name‘,‘id‘],  
8.             listeners:{  
9.                 load:function(){  
10.                     comboBox.setValue(comboBox.getValue());  
11.                 }  
12.             }  
13.         }),  
14.         name:combo.name,  
15.         fieldLabel:combo.fieldLabel,  
16.         id:combo.id,  
17.         hiddenName:combo.hiddenName,    //动态生成一个以指定名称命名的隐藏域用来存放值数据  
18.         displayField:‘name‘,    
19.         valueField :‘id‘,    
20.         typeAhead:false,            //值为true时在经过指定延迟（typeAheadDelay）后弹出并自动选择输入的文本，如果该文本与已知的值相匹配    
21.         mode:‘local‘,               //如果ComboBox读取本地数据则将值设为‘local‘（默认为 ‘remote‘ 表示从服务器读取数据）。如果设置为remote，并且autoLoad=true，就会加载两次  
22.         triggerAction:‘all‘,    
23.         emptyText:‘请选择...‘  
24.     });  
25.     return comboBox;  
26. };  

编辑数据的时候需要默认选中某一项，可编写函数

[javascript] view plain copy

1. App.selectComboBox = function(hiddenName,comboBoxId,value){  

[javascript] view plain copy

1. <span style="white-space:pre">  </span>//需要根据value获取到显示值  
2.     var combo = Ext.getCmp(comboBoxId);  
3.     var range = combo.getStore().getRange();  
4.     if(range != null && range.length>0){  
5.         var displayName = value;  
6.         for(var i=0;i<range.length;i++){  
7.             if(value == range[i].data.id){  
8.                 displayName = range[i].data.name;  
9.             }  
10.         }  
11.     }  
12.     combo.setValue(displayName);<span style="white-space:pre">      </span>//设置显示值<span style="white-space:pre">                </span>  
13.     Ext.query("*[name="+hiddenName+"]")[0].value = value;<span style="white-space:pre"> </span>//设置提交到后台的值  
14. }  

需要注意的是，在调用App.selectComboBox之前，必须先调用comboBox.getStore().load(); 加载数据，不然上面getRange()获取不到数据。