项目中经常用到选择框,需要从后台异步加载数据,可单独写一个组件进行加载
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()获取不到数据。