假设表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;
- }
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、页面显示字段翻译成功。藕叶。