Extjs3 combobox使用

　　　　Combobox 在程序中應用十分普遍，每個combobox的選項 一般對應兩個值：一個用於前臺顯示的值，一個與顯示值對應的value值。在後臺獲取value的值需使用combobox的 HiddenName 屬性，獲取顯示值使用name值。

（1）在extjs中combobox中的選項的數據源可以靜態加載（local）也可用選擇遠程加載（remote）。數據源加載方式通過屬性  mode 設置。

（2）屬性 displayField，valueField 用於設置combobox中選項對用的 key值。設置值爲string類型。這兩個設置值與數據源中的key相對應。即數據源中的字段命名要和這兩個屬性對應好，這樣才能將選項數據加載。

測試代碼：

 

Ext.onReady(function(){
 //根據需要 註釋相關代碼 測試

/// comb1 代碼添加處




/// comb2代碼添加處






// 界面整體佈局，comb1，comb2 爲測試用combobox


var qF = new Ext.form.FormPanel({
	region : 'center',
	margins : '3 3 3 3',
	height:480,
	title : '<span class="commoncss"><span>',
	collapsible : true,
	border : true,
	labelWidth : 50, // 標籤寬度
	labelAlign : 'right', // 標籤對齊方式
	bodyStyle:'padding:10 10 10 10',
	layout:'column',  
    autoScroll:true,  
    items:[
			{
 
					columnWidth : .6,
					layout : 'form',
					labelWidth :80, // 標籤寬度
					defaultType : 'textfield',
					border : false,
					items : [comb1]
			},
			{
 
					columnWidth : .6,
					layout : 'form',
					labelWidth :80, // 標籤寬度
					defaultType : 'textfield',
					border : false,
					items : [comb2]
			}
			] 
		});	
 var viewport = new Ext.Viewport({
				layout : 'border',
				items : [qF]
			});


});

　　

comb1測試數據：本地靜態數據源

var comb1Store =  new Ext.data.SimpleStore({ 
                                    fields : ['SHOWNAME', 'VALUE'], 
                                    data : [['類型1', '0'], ['類型2', '1']] 
                                }); 
var comb1 = new Ext.form.ComboBox({
      mode : 'local',//本地數據 
      store : comb1Store,
      width : 300,    
      displayField : 'SHOWNAME',
      valueField : 'VALUE',
      fieldLabel : '類型'      
     });

　對combobox添加自動補齊功能，對comb1 添加一個屬性即可：typeAhead:true　

 

comb2 遠程數據加載測試：

 

var comb2store = new Ext.data.Store({
      proxy : new Ext.data.HttpProxy({
         url : WEB_CONTEXT+'xxx.action' 
        }),
      reader : new Ext.data.JsonReader({}, [{
           name : 'VALUE'
          }, {
           name : 'SHOWNAME'
          }])
  });
 ds.load();
// load函數在頁面加載後，數據源已經在本地了。
// 這個數據源在頁面加載時已經加載到本地 

 var comb 2 =  new Ext.form.ComboBox({
      mode : 'local',//本地數據
      store : comb2store,  
      width : 300,
　　　triggerAction: 'all',          
      displayField : 'SHOWNAME',
　　　　valueField : 'VALUE',  
　　fieldLabel : '類型'
     });

　將上面 mode : 'remote', 數據源爲遠程獲取。

  triggerAction ： ‘all’  屬性添加上。不添加的話，remote下不加載數據。而且選中某個項目後 點擊trigger （右邊小箭頭）不會顯示列表了，只顯示選中項目。

  triggerAction: 'all',  //默認爲"query"，選擇某值後，再次選擇時只出現匹配選項，"all"表示再次選擇時出現所有項

 

 

（3） 上面comb2的兩種數據源的設置中，設置爲remote的狀態下，在用戶第一次點擊 trigger時，需要和後臺交互。local的情況不會。

（4） 添加自動補齊的情況下，comb2，在remote的情況下每次激發自動補齊時，都需要與後臺交互，而local的情況則不會。而且remote的情況下會出現自動補齊後，由於再次與後臺交互導致combo的已輸入內容別覆蓋，顯示列表中第一個選項的情況。解決方法：1.直接將combobox的mode設置爲local，2.給數據源添加方法將combobox設置爲local。

 combo2store.on("load",function(){
 combo2.mode='local';
});

 

（5） 剛剛又發現了一個遠程data store，然後本地處理的方法。  給store 設置屬性 autoLoad：true ，這樣store會自動加載，combobox的屬性mode 設置爲local即可。。。。。