假设表A是常见的系统字典表，包括id和name两个字段。

表B中某字段存的是表A的id，B表页面数据增加、修改时，那个id字段通常是个下拉框，valueField为id，displayField为name。

而B表数据页面显示时也需要同样友好地显示给用户可理解的name。

在我看来，就是页面字典翻译。


做了一天的尝试，先尝试把combobox嵌入grid的column，总不成功，而且这个思路好像有点偏了。

又想到在表B页面的model里面，对id字段进行转换。好像只能new model时调用转换方法，貌似很不方便。


最后尝试在grid的column进行转换，如下：

1、表B的gridPanel的column：

  1. { 
  2.   dataIndex:'id', 
  3.   text:'项目名称', 
  4.   renderer:rendererItem 
  5. }, 
2、rendererItem转换方法：
  1. function rendererItem(value,metadata,record){ 
  2. var rstore = Ext.data.StoreManager.get('RitemComboStore'); //RitemComboStore为storeId
  3. var index = rstore.find('id',value); 
  4. var record = rstore.getAt(index).get('name'); 
  5. return record; 
  6.    } 

2.5、rendererItem转换方法改进版：
  1. function operChange2(value){  
  2. var rstore = Ext.data.StoreManager.get('RitemComboStore');  
  3. var index = rstore.find('id',value);   
  4. if(index==-1)  //当store中找不到对应id得时候,index为-1
  5. returnnull;  
  6. else{  
  7. var record = rstore.getAt(index).get('name');   
  8. return record;   
  9. }  
  10. }  

3、RitemComboStore是复用的下拉框的store：
  1. Ext.define('MyApp.views.RitemCombo', { 
  2. extend: 'Ext.form.field.ComboBox', 
  3. alias:'widget.RitemCombo', 
  4. id:'RitemCombo', 
  5. name:'id', 
  6. width: 180, 
  7. fieldLabel: '项目名称', 
  8. labelWidth: 60, 
  9. emptyText: '请选择', 
  10. queryMode:'remote', 
  11. store: new Ext.data.Store({ 
  12. storeId:'RitemComboStore', 
  13. singleton : true, 
  14. proxy: { 
  15. type: 'ajax', 
  16. url : 'global!queryRItem', 
  17. actionMethods : 'post', 
  18. reader: { 
  19. type: 'json', 
  20. totalProperty: 'rowCount', 
  21. root: 'root'
  22. } 
  23. }, 
  24. fields:['id', 'name'], 
  25. autoLoad:true
  26. }), 
  27. loadingText:'正在加载数据，请稍侯……', 
  28. triggerAction:'all', 
  29. valueField:'id', 
  30. displayField:'name', 
  31. initComponent: function() { 
  32. var me = this; 
  33. me.callParent(arguments); 
  34. } 
  35. }); 
4、页面显示ok。
ExtJS4 grid column id显示转换为name,即字典翻译_ExtjS4 grid column
5、并且选中column点击“修改”按钮时，获得的值是id。
  1. var recordEdit= me.getSelectionModel().getLastSelected(); 
  2. var id = recordEdit.get("id"); 

  4. alert(id); 
6、页面显示字段翻译成功。藕叶。


2013-12-24：
已发现此方法的缺陷。
缺陷一：匹配name错误。combo中有两条数据，如（id:'12345'，name:'A'）,(id:'123',name:'B').会出现id为123的一直被翻译为A，而不是B。
原因：store的find（）方法，默认的是开头字符串匹配。
API里，
find( String fieldName, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive], [Boolean exactMatch] ) : Number

Finds the index of the first matching Record in this store by a specific field value.
When store is filtered, finds records only within filter.
Parameters
  • fieldName : String
    The name of the Record field to test.

  • value : String/RegExp
    Either a string that the field valueshould begin with, or a RegExp to test against the field.

  • startIndex : Number (optional)
    The index to start searching at
    Defaults to: 0

  • anyMatch : Boolean (optional)
    True to match any part of the string, not just the beginning
    Defaults to: false

  • caseSensitive : Boolean (optional)
    True for case sensitive comparison
    Defaults to: false

  • exactMatch : Boolean (optional)
    True to force exact match (^ and $ characters added to the regex).
    Defaults to: false

Returns
缺陷二：与combo的store联动。
当多个页面使用了此combo组件，当用户在其中一个页面的此下拉框中刚输入了不完整的文本，就打开了另一个有此combo组件的页面，那么，新打开页面的combo里面的数据是不完整的。
如，在角色权限页面的查询面板中的功能下拉框中，输入“教师”两个字，下拉框store此时变为只包含“教师”开头的相关数据。不对提示出来的选项做任何选择，打开权限页面。
ExtJS4 grid column id显示转换为name,即字典翻译_休闲_02
此时，权限页面的功能下拉框也只有“教师”开头的几个数据，而通过combo store来进行翻译的功能名称字段，除了这几个，其他就都无法翻译了。
ExtJS4 grid column id显示转换为name,即字典翻译_职场_03
第一个页面，即角色权限管理页面的功能下拉框，点击向下小箭头，或者清空，或者重新输入其他文字，还是可以出来完整的数据的。
ExtJS4 grid column id显示转换为name,即字典翻译_休闲_04
但后打开的第二个页面，即权限页面的功能下拉框除非关闭此页签重新打开，否则只有“教师”相关几个数据，连同字段翻译。

推测原因：大概跟我定义combo store的方式有关。