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

时间:2022-04-08 18:38:22
  标签:

假设表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.       dataIndex:'id'
  2.       text:'项目名称'
  3.       renderer:rendererItem 
  4. }, 

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

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

  
  
  1. Ext.define('MyApp.views.RitemCombo', { 
  2.     extend: 'Ext.form.field.ComboBox'
  3.     alias:'widget.RitemCombo'
  4.      
  5.     id:'RitemCombo'
  6.     name:'id'
  7.     width: 180, 
  8.     fieldLabel: '项目名称'
  9.     labelWidth: 60, 
  10.     emptyText: '请选择'
  11.     queryMode:'remote'
  12.     store: new Ext.data.Store({ 
  13.         storeId:'RitemComboStore'
  14.         singleton : true
  15.         proxy: { 
  16.                 type: 'ajax'
  17.                 url : 'global!queryRItem'
  18.                 actionMethods : 'post'
  19.                 reader: { 
  20.                     type: 'json'
  21.                     totalProperty: 'rowCount'
  22.                     root: 'root' 
  23.                 } 
  24.         }, 
  25.         fields:['id''name'], 
  26.         autoLoad:true 
  27.     }), 
  28.     loadingText:'正在加载数据,请稍侯……'
  29.     triggerAction:'all'
  30.     valueField:'id'
  31.     displayField:'name'
  32.  
  33.     initComponent: function() { 
  34.         var me = this
  35.         me.callParent(arguments); 
  36.     } 
  37. }); 

4、页面显示ok。

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

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

  
  
  1. var recordEdit= me.getSelectionModel().getLastSelected(); 
  2.                                     
  3. var id = recordEdit.get("id"); 
  4.  
  5. alert(id); 

6、页面显示字段翻译成功。藕叶。