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

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

博客分类：
• javascript

EXTAjax 

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

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