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                      }
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     

关键代码如下：

 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                      }