Ext中combobox在Grid里显示问题

Ext的Grid中使用combobox做为编辑控件时，遇到在combobox中选择了相应的选项时(displayField)，在grid中却显示了valueField值。现解决如下：

图示：

js代码：

Code
  1    var grid;
  2    function ready(queryCondition)
  3    {
  4        var pageSize = 150;
  5        var queryConditionTemplate = document.getElementById("hid").value;
  6        var url = "../AjaxFactory/AjaxGridData.aspx?cln=BindCommandTemplate&orderField=FGID&pagesize=" + pageSize+"&orderType=asc&queryConditionTemplate="+queryConditionTemplate;
  7        
  8        var url1= "../AjaxFactory/AjaxGridData.aspx?cln1=BindTemplateGroup&orderField=DMCOD&orderType=asc&projectID="+fatherID;
  9        var url2 = "../AjaxFactory/AjaxGridData.aspx?cln2=BindG050&orderField=DMCOD&orderType=asc";
 10        //var store;
 11        var comStore1;
 12        var comStore2;
 13        var storeMapping;
 14        var addCategory;
 15        var afterEdit;
 16        var defaultStore;
 17        var specoalStore;
 18       
 19        storeMapping=["FGID","COMMANDID","PARENTNAME","FUNCTIONIDNAME","NAME","GROUPNAME","HANDLESNAME"];
 20        
 21        //grid 数据源
 22        store = new Ext.data.Store({
 23        proxy:new Ext.data.HttpProxy({
 24            url:url
 25        }),
 26        reader:new Ext.data.JsonReader({
 27            root:'data',
 28            totalProperty: 'totalCount',
 29            fields:
 30            [
 31                'FGID','COMMANDID','PARENTNAME','SONNAME','NAME','FUNCTIONID','GROUPNAME','HANDLESNAME'
 32            ]
 33        }),    
 34        remoteSort:true
 35        });    
 36        //模板组
 37        comStore1 = new Ext.data.Store({
 38                        proxy:new Ext.data.HttpProxy({url:url1}),
 39                        reader: new Ext.data.JsonReader({
 40                        root:'data',
 41                        totalProperty: 'totalCount',
 42                        fields:
 43                        ['GROUPID','GROUP_NAME']
 44                        })
 45                    }),
 46        comStore1.load();
 47        //读写
 48        comStore2 = new Ext.data.Store({
 49                        proxy:new Ext.data.HttpProxy({url:url2}),
 50                        reader: new Ext.data.JsonReader({            
 51                        root:'data',
 52                        totalProperty: 'totalCount',
 53                        fields:
 54                        ['DMCOD','DMCPT']
 55                        })
 56                    }),
 57            comStore2.load();
 58        
 59       
 60        var cm=new Ext.grid.ColumnModel([        
 61        new Ext.grid.RowNumberer(),
 62        {header:"角色编号",align:'center',sortable: false,dataIndex:'FGID',hidden:true},
 63        {header:"命令编号",align:'center',sortable: false,dataIndex:'COMMANDID',hidden:true},
 64        {header:"子系统",align:'center',sortable: false,dataIndex:'PARENTNAME'},
 65        {header:"模块",align:'center',sortable: false,dataIndex:'SONNAME'},
 66        {header:"功能",align:'center',sortable: false,dataIndex:'NAME'},
 67        {
 68                header:"模板组",
 69                dataIndex:"GROUPNAME",
 70                align:'center',
 71                editor:new Ext.form.ComboBox({
 72                    id:'termtype',
 73                    name:'termtype',                    
 74                    readOnly:true,
 75                    fieldLabel: '模板组',    
 76                    hiddenName:'id',
 77                    store: comStore1,
 78                    displayField:'GROUP_NAME',
 79                    valueField:'GROUPID',                    
 80                    typeAhead: true,
 81                    mode: 'local',
 82                    triggerAction: 'all',
 83                    emptyText:'请选择',
 84                    selectOnFocus:true
 85                    }),
 86                    renderer: function(value, cellmeta, record) 
 87                    {
 88                        //通过匹配value取得ds索引
 89                        var index = comStore1.find(Ext.getCmp('termtype').valueField,value);
 90                        //通过索引取得记录ds中的记录集
 91                        var record = comStore1.getAt(index);
 92                        //返回记录集中的value字段的值
 93                        var returnvalue = "";
 94                        if (record) 
 95                        {
 96                            returnvalue = record.data.GROUP_NAME;
 97                        }
 98                        return returnvalue;//注意这个地方的value是上面displayField中的value
 99                     }
100            },
101            {
102                header:"操作性",
103                dataIndex:"HANDLESNAME",
104                align:'center',
105                editor:new Ext.form.ComboBox({
106                    id:'termtype1',
107                    name:'termtype1',
108                    readOnly:true,                    
109                    fieldLabel: '操作性',
110                    hiddenName:'id',
111                    store: comStore2,
112                    displayField:'DMCPT',
113                    valueField:'DMCOD',
114                    
115                    typeAhead: true,
116                    mode: 'remote',
117                    triggerAction: 'all',
118                    emptyText:'请选择',
119                    selectOnFocus:true
120                }),
121                    renderer: function(value, cellmeta, record) 
122                    {
123                        //通过匹配value取得ds索引
124                        var index = comStore2.find(Ext.getCmp('termtype1').valueField,value);
125                        //通过索引取得记录ds中的记录集
126                        var record = comStore1.getAt(index);
127                        //返回记录集中的value字段的值
128                        var returnvalue = "";
129                        if (record) 
130                        {
131                            returnvalue = record.data.DMCPT;
132                        }
133                        return returnvalue;//注意这个地方的value是上面displayField中的value
134                     }
135            }
136        ]);    
137        cm.defaultSortable = true;
138        
139        grid=new Ext.grid.EditorGridPanel({
140                id:"topicCategoryGrid",    
141                 store:store,
142                  cm:cm, 
143                loadMask: true,
144                clicksToEdit:1,
145                renderTo:'authorize', 
146                trackMouseOver:true,
147                autoShow : true,
148                autoScroll: true,
149                loadMask:{msg:"数据加载中，请稍等"},
150                frame:true,
151                height: window.screen.availHeight - 200,//176,
152                width: window.screen.availWidth - s_widths,
153                viewConfig:{forceFit:true},    
154                 region:"center",
155                 bbar:new Ext.PagingToolbar({
156                pageSize:150,
157                store:store,
158                displayInfo:true,
159                displayMsg:'当前显示 {0} - {1}条记录 /共 {2}条记录',
160                emptyMsg:"没有数据"
161                })
162        });
163        grid.on("afteredit",
164            function (obj)
165            {
166                var r=obj.record;
167                var l = obj.field;
168                var uFGID=r.get("FGID");
169                var uCOMMANDID = r.get("COMMANDID");    
170                var uGROUPNAME = Ext.getCmp("termtype").getValue();
171                var uHANDLESNAME = Ext.getCmp("termtype1").getValue();
172                var today = new Date().getTime();
173                Ext.Ajax.request({
174                url:"../AjaxFactory/AjaxGridData.aspx?cln=UpdateRoleTemplate&orderField=FGID&orderType=asc&da="+today,
175                method:'POST',
176                params: {
177                    uFGID:uFGID,    
178                    uCOMMANDID:uCOMMANDID,
179                    uGROUPNAME:uGROUPNAME,
180                    uHANDLESNAME:uHANDLESNAME,
181                    l:l
182                },
183                success:function(response){
184                //store.load();
185                },
186                failure:function(response){
187                Ext.MessageBox.alert("温馨提示", "请求失败！");
188                },
189                scope:this
190                });
191            },
192            this);
193
194            grid.getStore().load({
195            params: {
196                start: 0,
197                limit: 12
198            }
199        });  
200    }
201        //自适应
202        function GridOnReSize(s_widths)
203        {
204            grid.setWidth(window.screen.availWidth - s_widths);    
205            grid.setHeight(window.screen.availHeight - 200);
206        }  
207    

关键代码如下：

Code
 1                    renderer: function(value, cellmeta, record) 
 2                    {
 3                        //通过匹配value取得ds索引
 4                        var index = comStore1.find(Ext.getCmp('termtype').valueField,value);
 5                        //通过索引取得记录ds中的记录集
 6                        var record = comStore1.getAt(index);
 7                        //返回记录集中的value字段的值
 8                        var returnvalue = "";
 9                        if (record) 
10                        {
11                            returnvalue = record.data.GROUP_NAME;
12                        }
13                        return returnvalue;//注意这个地方的value是上面displayField中的value
14                     }