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

最新推荐文章于 2023-04-26 21:35:37 发布

iteye_11629

最新推荐文章于 2023-04-26 21:35:37 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： EXT Ajax

本文链接：https://blog.youkuaiyun.com/iteye_11629/article/details/81815987

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何解决ExtJS中EditorGridPanel的ComboBox选择项显示问题，通过配置renderer属性并结合隐藏列的方式，确保数据显示正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中使用了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');
						}