[轉]Ext ComboBox 預設選中某一項

標籤：

原文地址: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()擷取不到資料。

[轉]Ext ComboBox 預設選中某一項