爱华网博客分类： javascript
EXTAjax
在项目中使用了extjs的editorgridpanel,但是其中的combobox在选择了相应的选项后，grid中显示的是值域(valueField)的值，而非意愿中的显示域(displayField)的值，经过一些搜索和尝试后找到了一个比较好的解决方法——在定义带combobox的列时配置其renderer的属性。
Extjs代码
varassistItemStore=newExt.data.JsonStore({
url:'assist.do',
baseParams:{
m:'listAllLike',
shopid:shopid,
subid:subid
},
root:'items',
fields:[{
name:'aux_name',
mapping:'assistName'
},{
name:'aux_id',
mapping:'assistid'
}]
});
Extjs代码
{
header:'项目名称',
width:100,
dataIndex:'aux_id',
editor:newExt.form.ComboBox({
autoLoad:true,
triggerAction:'all',
selectOnFocus:true,
allowBlank:true,
editable:true,
displayField:'aux_name',
valueField:'aux_id',
minChars:1,
queryParam:'subname',
typeAhead:true,
store:assistItemStore
}),
renderer:function(value,metadata,record){
varindex=assistItemStore.find('aux_id',value);
if(index!=-1){
returnassistItemStore.getAt(index).data.aux_name;
}
returnvalue;
}
这样写之后，选择之后grid中显示了displayField的值，但最初从数据库提取的值仍然显示valueField的值，原因是store的数据是远程取得的，在grid最初的render中还无法从store中查到相对应的displayField的值,于是打算用ajax异步取得displayField的值,但是异步的线程不造成阻塞,无法保证返回值之前能取得相应的数据.后来想出另一个方法,为grid增加一个隐藏列,存放对应的值,在最初提取数据时能够从中获取要显示的值.
Extjs代码
{
header:'',
width:10,
dataIndex:'aux_name',
hidden:true
},{
header:'项目名称',
width:100,
dataIndex:'aux_id',
editor:newExt.form.ComboBox({
autoLoad:true,
triggerAction:'all',
selectOnFocus:true,
allowBlank:true,
editable:true,
displayField:'aux_name',
valueField:'aux_id',
minChars:1,
queryParam:'subname',
typeAhead:true,
store:assistItemStore
}),
renderer:function(value,metadata,record){
varindex=assistItemStore.find('aux_id',value);
if(index!=-1){
returnassistItemStore.getAt(index).data.aux_name;
}
returnrecord.get('aux_name');
}
总感觉这个编辑框太小了,用着很不舒服,希望改进.
