1. 程式人生 > >在修改資訊視窗中,Ext.combobox的預設值顯示

在修改資訊視窗中,Ext.combobox的預設值顯示

var ustatus = Ext.create('Ext.form.field.ComboBox',{
		width: 325, 
		labelWidth: 80, 
		fieldLabel:'狀態',
		allowBlank:true,
		store:Ext.create('Ext.data.Store',{
			fields:[{name:'label'},{name:'value'}],
			data:[{label:'啟用',value:'1'},{label:'禁用',value:'0'}]
		}),
		displayField:'label',
		valueField:'value',
		name:'ustatus',
		id:'ustatus',
		listeners: {  
			afterrender: function(combo) {  
			combo.setValue(statuValue);  //statuValue為資料庫讀取的1或0.
        		
         }  
		}  
		
	});     

結果在修改視窗combobox顯示的是1或0.不能根據傳入的statuValue顯示其對應的displayField .

於是修改成:

afterrender: function(combo) {
 if(statuValue == '1'){
combo.setRawValue('啟用'); 
combo.setValue(statuValue);
}else{
combo.setRawValue('禁用');
 combo.setValue(statuValue);                    }

 } 

結果在修改視窗combobox顯示的還是1或0.不能根據傳入的statuValue顯示其對應的displayField .

但將combo.setValue(statuValue);放在combo.setRawValue('啟用');後面的話,顯示的是'啟用',但如果不修改直接提交的話,會報錯,後臺接到的值是null.

所以發現:

combo.setRawValue('啟用');combo.setValue(statuValue);是一回事,都是設displayField的值,不能設定valueField的值。

於是將程式碼修改成:

listeners: {  
			afterrender: function(combo) {  
			
        		if(statuValue == '1'){
        			//combo.setValue('啟用');
        			combo.setRawValue('啟用');
        			combo.value=statuValue;
        			}else{
        			combo.setRawValue('禁用');
        			combo.value=statuValue;
        			}
         }  
		}  

結果正確。在修改視窗中顯示的是dispalyField值。直接提交後臺也能得到dispalyField對應的valueField值。

但還有一個小問題。就是在修改視窗中第一次點選下拉框的時候Combobox中的值變成了1或0。