ExtJS4 grid column id显示转换为name,即字典翻译

假设表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：

{
  dataIndex:'id',
  text:'项目名称',
  renderer:rendererItem
},

2、rendererItem转换方法：

function rendererItem(value,metadata,record){
var rstore = Ext.data.StoreManager.get('RitemComboStore'); //RitemComboStore为storeId
var index = rstore.find('id',value);
var record = rstore.getAt(index).get('name');
return record;
   }

2.5、rendererItem转换方法改进版：

function operChange2(value){
var rstore = Ext.data.StoreManager.get('RitemComboStore');
var index = rstore.find('id',value);
if(index==-1)  //当store中找不到对应id得时候,index为-1
returnnull;
else{
var record = rstore.getAt(index).get('name');
return record;
}
}

3、RitemComboStore是复用的下拉框的store：

Ext.define('MyApp.views.RitemCombo', {
extend: 'Ext.form.field.ComboBox',
alias:'widget.RitemCombo',
id:'RitemCombo',
name:'id',
width: 180,
fieldLabel: '项目名称',
labelWidth: 60,
emptyText: '请选择',
queryMode:'remote',
store: new Ext.data.Store({
storeId:'RitemComboStore',
singleton : true,
proxy: {
type: 'ajax',
url : 'global!queryRItem',
actionMethods : 'post',
reader: {
type: 'json',
totalProperty: 'rowCount',
root: 'root'
}
},
fields:['id', 'name'],
autoLoad:true
}),
loadingText:'正在加载数据，请稍侯……',
triggerAction:'all',
valueField:'id',
displayField:'name',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});

4、页面显示ok。

5、并且选中column点击“修改”按钮时，获得的值是id。

var recordEdit= me.getSelectionModel().getLastSelected();
var id = recordEdit.get("id");

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

• Number

  The matched index or -1

  
  

缺陷二：与combo的store联动。

当多个页面使用了此combo组件，当用户在其中一个页面的此下拉框中刚输入了不完整的文本，就打开了另一个有此combo组件的页面，那么，新打开页面的combo里面的数据是不完整的。

如，在角色权限页面的查询面板中的功能下拉框中，输入“教师”两个字，下拉框store此时变为只包含“教师”开头的相关数据。不对提示出来的选项做任何选择，打开权限页面。

此时，权限页面的功能下拉框也只有“教师”开头的几个数据，而通过combo store来进行翻译的功能名称字段，除了这几个，其他就都无法翻译了。

第一个页面，即角色权限管理页面的功能下拉框，点击向下小箭头，或者清空，或者重新输入其他文字，还是可以出来完整的数据的。

但后打开的第二个页面，即权限页面的功能下拉框除非关闭此页签重新打开，否则只有“教师”相关几个数据，连同字段翻译。

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