修改EditorGridPanel让它支持Lookup效果
记得Dephi里有一个叫Lookup效果的Grid（不知道是不是这种叫法），就是如何在Grid中显示或编辑代码数据项，下面就是Ext的实现
希望对有这种需求的同学有所帮助。
一、重写Ext.grid.GridEditor让Editor控件获得Grid的当前行数据，代码如下，大家可以对照原来Ext.grid.GridEditor的源码
二、继承Ext.form.ComboBox，让combo在设置值时把代码值写到Grid当前行的代码数据项中：
三、使用:如下代码，附件有完整的例子，下载解压到ext的examples\grid文件夹中可以运行.
希望对有这种需求的同学有所帮助。
一、重写Ext.grid.GridEditor让Editor控件获得Grid的当前行数据，代码如下，大家可以对照原来Ext.grid.GridEditor的源码
Ext.grid.GridEditor = function(field, config){
Ext.grid.GridEditor.superclass.constructor.call(this, field, config);
field.monitorTab = false;
};
Ext.extend(Ext.grid.GridEditor, Ext.Editor, {
alignment: "tl-tl",
autoSize: "width",
hideEl : false,
cls: "x-small-editor x-grid-editor",
shim:false,
shadow:false,
//从Editor.js中拷贝过来
startEdit : function(el, value){
if(this.editing){
this.completeEdit();
}
this.boundEl = Ext.get(el);
var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
if(!this.rendered){
this.render(this.parentEl || document.body);
}
if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
return;
}
this.startValue = v;
this.field.record = this.record;//就加入这一行，让field中获得当前数据行
this.field.setValue(v);
this.doAutoSize();
this.el.alignTo(this.boundEl, this.alignment);
this.editing = true;
this.show();
}
});
二、继承Ext.form.ComboBox，让combo在设置值时把代码值写到Grid当前行的代码数据项中：
Ext.form.LookupComboBox = Ext.extend(Ext.form.ComboBox, {
setValue:function (v) {
var text = v;
var lookupValue;
//增加的代码
if (this.codeField) {
var r = this.findRecord(this.displayField, v);
if (r) {
lookupValue = r.data[this.codeField];
} else {
if (this.valueNotFoundText !== undefined) {
lookupValue = this.valueNotFoundText;
}
}
}
if (this.record&&lookupValue) {
this.record.set(this.lookup, lookupValue);//把代码值写到Grid当前行数据中的代码项目字段
}
//增加的代码 --end
this.lastSelectionText = text;
if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
}});
三、使用:如下代码，附件有完整的例子，下载解压到ext的examples\grid文件夹中可以运行.
//查帐信息
var itemTypeStore = new Ext.data.SimpleStore({
fields: ['code','name'],
data : [['100','流动资产'],['101','固定资产']]
});
var insureModeStore = new Ext.data.SimpleStore({
fields: ['code','name'],
data : [['100','账面原值'],['101','原值加成'],['102','账面余额'],['103','余额加成'],['104','清单'],['105','估价'],['106','账面净值'],['107','其他']]
});
var currencySystemStore = new Ext.data.SimpleStore({
fields: ['code','name'],
data : [['0110001','美元'],['0110002','英镑'],['0110003','港币'],['0110004','人民币']]
});
var Plant = Ext.data.Record.create([
{name:'id',type:'int'},
{name:'surveyId',type:'int'},
{name:'itemType',type:'string'},
{name:'itemName',type:'string'},
{name:'insureMode',type:'string'},
{name:'currencySystem',type:'string'},
{name:'insuredAmount',type:'float'},
{name:'spotPrice',type:'float'},
{name:'desc',type:'string'}
]);
var auditReader = new Ext.data.JsonReader({
idProperty:'id',
fields: [
{name:'id',type:'int'},
{name:'surveyId',type:'int'},
'itemType','itemName','insureMode','currencySystem','desc',
'insureModeName','itemTypeName','currencySystemName',
{name:'insuredAmount',type:'float'},
{name:'spotPrice',type:'float'},
{name:'inAccountTime',type:'date',format:'Y-m-d H:i'}
]
});
var auditStore = new Ext.data.Store({
data: xg.dummyData,
reader: reader,
remoteSort: true
});
var auditsm = new xg.RowNumberer();
var auditcm = new xg.ColumnModel([
auditsm,
{id:'id',hidden: true,dataIndex:'id',sortable: false},
{header:'项目类型代码',hidden:true,dataIndex:'itemType',sortable: false},
//下面是代码的lookup字段，
{header: '项目类型', width: 100,dataIndex: 'itemTypeName',sortable: false,
renderer: function(v, params, record){
//根据项目类型字段的值找代码数据中它的应名称，并显示出来,就可以实现lookup效果了
return findRecordValue(itemTypeStore,'code',record.data['itemType'],'name');
},
//加入LookupComboBox，实现lookup的编辑效果
editor: new Ext.form.LookupComboBox({
store: itemTypeStore,
codeField:'code',
displayField:'name',
lookup:'itemType',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'--请选择--',
selectOnFocus:true
})
},
{header: '项目名称', width: 100,dataIndex: 'itemName',sortable: false,
editor: new Ext.form.TextField({
allowBlank: false
})
},
{header: '投保方式', width: 100,dataIndex: 'insureModeName',sortable: false,
renderer: function(v, params, record){
return findRecordValue(insureModeStore,'code',record.data['insureMode'],'name');
},
editor: new Ext.form.LookupComboBox({
store: insureModeStore,
codeField:'code',
displayField:'name',
lookup:'insureMode',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'--请选择--',
selectOnFocus:true
})
},
{header:'投保方式代码',hidden: true,dataIndex:'insureMode',sortable: false},
{header: '投保时金额',renderer: Ext.util.Format.money,width: 100,dataIndex: 'insuredAmount',sortable: false,
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
style: 'text-align:left'
})
},
{header: '出险时金额',renderer: Ext.util.Format.money,width: 80,dataIndex:'spotPrice',sortable: false,
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
style: 'text-align:left'
})
},
{header:'项目币种代码',hidden:true,dataIndex:'currencySystem',sortable:false},
{header: '项目币种', width: 60,dataIndex:'currencySystemName',sortable: false,
renderer: function(v, params, record){
return findRecordValue(currencySystemStore,'code',record.data['currencySystem'],'name');
},
editor: new Ext.form.LookupComboBox({
store: currencySystemStore,
codeField:'code',
displayField:'name',
lookup:'currencySystem',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'--请选择--',
selectOnFocus:true
})
},
{header: '入帐时间', width: 90,dataIndex:'inAccountTime',sortable: false,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i'),
editor: new Ext.form.DateField({format:'Y-m-d H:i',menu:new DatetimeMenu()})
},
{header:'说明',width:120,dataIndex:'desc',sortable: false,
editor:new Ext.form.TextArea()
}
]);
auditcm.defaultSortable = true;
var auditInfoGrid = new xg.EditorGridPanel({
title:'查帐信息',
iconCls:'icon-grid',
store: auditStore,
cm: auditcm,
loadMask: true,
bodyStyle:'width:100%',
border:false,
frame:true,
clicksToEdit:1,
renderTo: document.body,
viewConfig: {forceFit:true},
tbar:[{text:'增加',tooltip:'增加查帐信息',iconCls:'add',handler : function(){
var plan = new Plant({id:0,surveyId:20,itemType:'',itemName:'',insureMode:'',currencySystem:''});
auditStore.commitChanges();
var count = auditStore.getCount();
auditStore.insert(count,plan);
auditInfoGrid.startEditing(count, 0);
}
},
'-',
{text:'删除',tooltip:'删除查帐信息',iconCls:'remove',handler:function(){alert(Ext.util.Format.date(auditStore.getAt(0).data.inAccountTime,'Y-m-d H:i'));}}
]
});
auditStore.load();
Ext.grid.dummyData = [{id:1,surveyId:20,itemType:'100',itemName:'电脑设备',desc:'革命同志',insureMode:'100',currencySystem:'0110004',insuredAmount:1000.00,spotPrice:8900.00,inAccountTime:'Fri Aug 15 11:18:07 CST 2008'}];