Ext中combobox在Grid里显示问题

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

图示：

js代码：

  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                     }
            },
            {
                header:"操作性",
                dataIndex:"HANDLESNAME",
                align:'center',
                editor:new Ext.form.ComboBox({
                    id:'termtype1',
                    name:'termtype1',
                    readOnly:true,                    
                    fieldLabel: '操作性',
                    hiddenName:'id',
                    store: comStore2,
                    displayField:'DMCPT',
                    valueField:'DMCOD',
                    
                    typeAhead: true,
                    mode: 'remote',
                    triggerAction: 'all',
                    emptyText:'请选择',
                    selectOnFocus:true
                }),
                    renderer: function(value, cellmeta, record) 
                    {
                        //通过匹配value取得ds索引
                        var index = comStore2.find(Ext.getCmp('termtype1').valueField,value);
                        //通过索引取得记录ds中的记录集
                        var record = comStore1.getAt(index);
                        //返回记录集中的value字段的值
                        var returnvalue = "";
                        if (record) 
                        {
                            returnvalue = record.data.DMCPT;
                        }
                        return returnvalue;//注意这个地方的value是上面displayField中的value
                     }
            }
        ]);    
        cm.defaultSortable = true;
        
        grid=new Ext.grid.EditorGridPanel({
                id:"topicCategoryGrid",    
                 store:store,
                  cm:cm, 
                loadMask: true,
                clicksToEdit:1,
                renderTo:'authorize', 
                trackMouseOver:true,
                autoShow : true,
                autoScroll: true,
                loadMask:{msg:"数据加载中，请稍等"},
                frame:true,
                height: window.screen.availHeight - 200,//176,
                width: window.screen.availWidth - s_widths,
                viewConfig:{forceFit:true},    
                 region:"center",
                 bbar:new Ext.PagingToolbar({
                pageSize:150,
                store:store,
                displayInfo:true,
                displayMsg:'当前显示 {0} - {1}条记录 /共 {2}条记录',
                emptyMsg:"没有数据"
                })
        });
        grid.on("afteredit",
            function (obj)
            {
                var r=obj.record;
                var l = obj.field;
                var uFGID=r.get("FGID");
                var uCOMMANDID = r.get("COMMANDID");    
                var uGROUPNAME = Ext.getCmp("termtype").getValue();
                var uHANDLESNAME = Ext.getCmp("termtype1").getValue();
                var today = new Date().getTime();
                Ext.Ajax.request({
                url:"../AjaxFactory/AjaxGridData.aspx?cln=UpdateRoleTemplate&orderField=FGID&orderType=asc&da="+today,
                method:'POST',
                params: {
                    uFGID:uFGID,    
                    uCOMMANDID:uCOMMANDID,
                    uGROUPNAME:uGROUPNAME,
                    uHANDLESNAME:uHANDLESNAME,
                    l:l
                },
                success:function(response){
                //store.load();
                },
                failure:function(response){
                Ext.MessageBox.alert("温馨提示", "请求失败！");
                },
                scope:this
                });
            },
            this);

            grid.getStore().load({
            params: {
                start: 0,
                limit: 12
            }
        });  
    }
        //自适应
        function GridOnReSize(s_widths)
        {
            grid.setWidth(window.screen.availWidth - s_widths);    
            grid.setHeight(window.screen.availHeight - 200);
        }  
    

关键代码如下：

 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) 
                        {
                            returnvalue = record.data.GROUP_NAME;
                        }
                        return returnvalue;//注意这个地方的value是上面displayField中的value
                     }