Ext ComboBox 默许选中某一项

Ext ComboBox 默认选中某一项

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

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

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

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

	//需要根据value获取到显示值
	var combo = Ext.getCmp(comboBoxId);
	var range = combo.getStore().getRange();
	if(range != null && range.length>0){
		var displayName = value;
		for(var i=0;i<range.length;i++){
			if(value == range[i].data.id){
				displayName = range[i].data.name;
			}
		}
	}
	combo.setValue(displayName);		//设置显示值				
	Ext.query("*[name="+hiddenName+"]")[0].value = value;	//设置提交到后台的值
}

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