extjs的EditorGridPanel中的ComboBox列中显示值的问题

在项目中使用了extjs的editorgridpanel,但是其中的combobox在选择了相应的选项后，grid中显示的是值域(valueField)的值，而非意愿中的显示域(displayField)的值，经过一些搜索和尝试后找到了一个比较好的解决方法——在定义带combobox的列时配置其renderer的属性。

var assistItemStore = new Ext.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'
								}]
							});

{
						header :'项目名称',
						width :100,
						dataIndex :'aux_id',
						editor : new Ext.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){
							var index = assistItemStore.find('aux_id',value);
							if(index!=-1){
								return assistItemStore.getAt(index).data.aux_name;
							}
							return value;
						}

这样写之后，选择之后grid中显示了displayField的值，但最初从数据库提取的值仍然显示valueField的值，原因是store的数据是远程取得的，在grid最初的render中还无法从store中查到相对应的displayField的值,于是打算用ajax异步取得displayField的值,但是异步的线程不造成阻塞,无法保证返回值之前能取得相应的数据.后来想出另一个方法,为grid增加一个隐藏列,存放对应的值,在最初提取数据时能够从中获取要显示的值.

{
						header:'',
						width:10,
						dataIndex:'aux_name',
						hidden:true
					}, {
						header :'项目名称',
						width :100,
						dataIndex :'aux_id',
						editor : new Ext.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){
							var index = assistItemStore.find('aux_id',value);
							if(index!=-1){
								return assistItemStore.getAt(index).data.aux_name;
							}
							return record.get('aux_name');
						}

总感觉这个编辑框太小了,用着很不舒服,希望改进.

评论

3 楼 xay0326 2012-10-16  

我的问题解决了，谢谢！

2 楼 sysme 2011-08-15  

另，关于初始显示名称的问题，只要把store的autoLoad设置为true就没问题。

1 楼 sysme 2011-08-15  

好贴啊 我也正遇到此问题