在修改信息窗口中，Ext.combobox的默认值显示

最新推荐文章于 2022-07-26 16:24:34 发布

原创最新推荐文章于 2022-07-26 16:24:34 发布 · 2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ComboBox

本文探讨了ExtJS中ComboBox组件在设置初始值时遇到的问题，并提供了有效的解决方案。通过调整setValue和setRawValue的使用方式，确保了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。