关于Ext.form.ComboBox在Ext.grid.EditorGridPanel中的小应用

随着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)
}

完毕。

只是把功能的过程实现进行了一个前后效果对比，欢迎拍砖！