随着ExtJS框架变得越来越流行普及,更多应用系统在客户端的选择上倾向于它,因为ExtJS框架的一些应用为客户准备得更为周详。
但是随着客户越来越挑剔的行为,我们有时候很无奈,但又不能违背客户的医院,只好硬着头皮尽力去实现客户的需求。
下面以简单的可编辑的Ext.form.ComboBox为例,具体说说实现过程:
1、定义Grid的实体为Ext.grid.EditorGridPanel;
2、将需要实现可编辑的ComboBox的字段的配置项设置为:
{
header:"名称",
dataIndex:'desc',
width:300,
align:'left',
sortable:true,
editor: new Ext.form.ComboBox({
id:'stkCatField',
width:216,
listWidth:216,
allowBlank:true,
store:IncScStkGrpStore,
valueField:'RowId',
displayField:'Description',
emptyText:'',
triggerAction:'all',
emptyText:'',
minChars:1,
pageSize:200,
selectOnFocus:true,
forceSelection:true,
editable:true,
listeners:{
specialKey:function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
addNewSCRow();
}
}
}
})
}
上面的代码在客户端的截图:
原则上讲,第二步骤没有问题,而且我们在取值的时候也确实可以取到,对于程序员来讲,做到这一步已经可以结束了。
但是我们看一下保存的效果:
这种效果可不是客户愿意看到的,客户看到这样一个数字会很郁闷,反正我觉得郁闷。
我们来看下面一种效果:
如果能达到这样一种效果,客户会觉得比较舒服。那么是如何实现的呢?看下面的代码:
var SCG = new Ext.form.ComboBox({
fieldLabel : '名称',
id : 'SCG',
name : 'SCG',
auchor : '90%',
width : 120,
store : IncScStkGrpStore,
valueField : 'RowId',
displayField : 'Description',
allowBlank : false,
triggerAction : 'all',
emptyText : '名称...',
selectOnFocus : true,
forceSelection : true,
minChars : 1,
pageSize : 10,
listWidth : 250,
valueNotFoundText : ''
});
function rendererSCG(value, p, r) {
var combo = Ext.getCmp('SCGList');
var index = SCGStoreList.find(combo.valueField, value);
var record = SCGStoreList.getAt(index);
var recordv = combo.findRecord(combo.valueField, value);
if (value == '' || !recordv) {
return value;
}
var displayText = "";
if (record == null) {
displayText = value;
} else {
displayText = recordv.get(combo.displayField);
}
return displayText;
}
var SCGStoreList = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'dhcst.stkcatgroupaction.csp?actiontype=INCSCStkGrp&StkType=G&start=0&limit=999'
}),
reader : new Ext.data.JsonReader({
totalProperty : "results",
root : 'rows'
}, ['Description', 'RowId'])
});
SCGStoreList.load();
var SCGList = new Ext.form.ComboBox({
fieldLabel : '名称',
id : 'SCGList',
name : 'SCGList',
auchor : '90%',
width : 120,
store : SCGStoreList,
valueField : 'RowId',
displayField : 'Description',
allowBlank : false,
triggerAction : 'all',
emptyText : '名称...',
selectOnFocus : true,
forceSelection : true,
minChars : 1,
pageSize : 10,
listWidth : 250,
valueNotFoundText : ''
});
{
header:"名称",
dataIndex:'desc',
width:300,
align:'left',
sortable:true,
sortable:true,renderer : rendererSCG,
editor:new Ext.grid.GridEditor(SCG)
}
完毕。
只是把功能的过程实现进行了一个前后效果对比,欢迎拍砖!