Ext 中由Combobox和itemselector组成的editorGrid

var win;
var operateGridPanel;
var _recordIndex = 0;// 编辑的行号
var _recordChangeTypeId;// 编辑的行的切换类型ID

/**
 * 动态生成Store
 * 
 * @param {Object}
 *            param
 * @param {Object}
 *            loadFlag
 * @return {TypeName}
 */
function getStore(param, loadFlag) {
	return new Ext.data.JsonStore({
		url : "/bsapp/service/xml/xmloperation.action" + param,
		autoLoad : loadFlag,
		pruneModifiedRecords : true,
		fields : ['name', 'title'],
		root : 'data',
		method : 'GET'
	});
};

/**
 * Ext.form.ComboBox
 */
var combo = new Ext.form.ComboBox({
	id : 'combo',
	hiddenName : 'comboValue',// 隐藏域的name
	hiddenId : 'comboValue',// 隐藏域的ID
	hiddenValue : 'value',// 隐藏域的值 如果不设置，getValue()得到的是显示的值
	fieldLabel : "切换类型",
	displayField : 'title',// 显示的值
	valueField : 'name',// 隐藏的值
	selectOnFocus : true,
	typeAhead : true,
	triggerAction : 'all',
	readonly : true,
	editable : false,
	allowBlank : false,
	blankText : "请选择切换类型"// 只读
});

/**
 * Ext.grid.GridPanel Store的Field
 */
var operateFiled = [{
	name : 'changeTypeId',
	type : 'String'
}, {
	name : 'changeTitle',
	type : 'String'
}, {
	name : 'KPIMap',
	type : 'String'
}, {
	name : 'KPI',
	type : 'String'
}];

/**
 * Grid的Store
 * 
 * @param {Object}
 *            v
 * @return {TypeName}
 */
var operateStore = new Ext.data.Store({
	reader : new Ext.data.JsonReader({
		totalProperty : 'totalCount',// 该属性是指定记录集的总数（可选的）
		root : 'list',// 该属性是指定包含所有行对象的数组
		fields : operateFiled

	}),
	remoteSort : true,
	pruneModifiedRecords : true
});

/**
 * GridPanel的checkBoxModel
 */
var checkModel = new Ext.grid.CheckboxSelectionModel({
	handleMouseDown : Ext.emptyFn
// 只能选择CHECKBOX选中一行
});
/**
 * Ext.grid.GridPanel Column
 */
var operateColumn = new Ext.grid.ColumnModel({
			columns : [checkModel, {
				header : "切换类型",
				dataIndex : 'changeTypeId',
				width : 100,
				editor : combo,
				renderer : function(v) {
					// 渲染图片至单元格操作
					if (v != null && v != "") {
						// 通过隐藏值来找出这行RECORD 从而得出显示的值
						var _record = combo.getStore().getAt(combo.getStore()
								.find(combo.valueField, v));
						return _record.get(combo.displayField);
					}
				}
			}, {
				// 隐藏列，存放切换的title,用于查询结果的tabPanel的title值
				id : 'changeTitle',
				header : "切换显示值",
				hidden : true,
				width : 30,
				dataIndex : 'changeTitle'

			}, {
				id : 'KPIMap',
				header : "指标值",
				hidden : true,
				width : 30,
				dataIndex : 'KPIMap'
			}, {
				header : "指标",
				width : 720,
				dataIndex : 'KPI'
			}, {
				header : "<img  style='align:center;'  "
						+ "src='/bsapp/extjs/resources/images/default/dd/"
						+ "drop-add.gif' onclick='addKPIToGrid();'/>",
				width : 50,
				dataIndex : '',
				align : 'center',
				renderer : function(v) {
					// 渲染图片至单元格操作
					return "<img src='/bsapp/images/bsapp/capablitity/basic/images/deleteAll.gif'/>";
				}
			}]
		});

/**
 * 添加KPI指标到Grid (插入时需要改变下拉选择框)
 */
function addKPIToGrid() {
	if (combo.getStore().getCount() > 0) {
		if (operateGridPanel.getStore().getCount() < combo.getStore()
				.getCount()) {

			var record = new Ext.data.Record([{
				name : 'changeTypeId',
				type : 'String'
			}, {
				name : 'changeTitle',
				type : 'String'
			}, {
				name : 'KPIMap',
				type : 'int'
			}, {
				name : 'KPI',
				type : 'string'
			}]);
			// record.data['changeTypeId'] = '';
			record.data['KPIMap'] = '';
			record.data['KPI'] = '';

			operateGridPanel.getStore().add(record);
		} else {
			Ext.MessageBox.show({
						title : "友情提示",
						msg : "不能超过切换类型的个数",
						buttons : Ext.Msg.OK,
						width : 260,
						icon : Ext.MessageBox.WARNING
					});
		}
	} else {
		Ext.MessageBox.show({
					title : "友情提示",
					msg : "没有相应的切换类型",
					buttons : Ext.Msg.OK,
					width : 260,
					icon : Ext.MessageBox.ERROR
				});
	}
};
/*
 * Ext.ux.form.ItemSelector
 */
var isForm = new Ext.form.FormPanel({
			frame : true,
			bodyStyle : 'padding:5px;',
			layout : 'column',
			hideLabel : true,
			items : [{
				xtype : 'itemselector',
				name : 'itemselector',
				drawUpIcon : false,
				drawDownIcon : false,
				drawLeftIcon : true,
				drawRightIcon : true,
				drawTopIcon : false,
				drawBotIcon : false,
				fieldLabel : '',
				imagePath : '/bsapp/extjs/plugins/ux/images/',
				multiselects : [{
					width : 250,
					height : 200,
					id : 'fromSelect',
					store : getStore('', false),
					legend : '待选指标',
					displayField : 'title',
					valueField : 'name'
				}, {
					width : 250,
					height : 200,
					id : 'toSelect',
					store : getStore('', false),
					legend : '已选指标',
					displayField : 'title',
					valueField : 'name'
				}]
			}]
		});

Ext.onReady(function() {
	/**
	 * 开启EXT提示功能
	 * 
	 * @return {TypeName}
	 */
	Ext.QuickTips.init();

	combo.store = getStore("", false);
	Ext.form.Field.prototype.msgTarget = 'side';
	// combo.getStore().load();
	win = new Ext.Window({
				frame : true,
				width : 558,
				title : '选择指标',
				closeAction : 'hide',
				modal : true,// 遮罩
				resizable : false,// 不可改变大小
				items : [isForm],
				buttons : [{
					text : '确定',
					handler : function() {
						// 保存当前切换类型下的所有指标的name和title值
						ay_all_target
								.push(isForm.getForm()
										.findField('itemselector').fromMultiselect.store.data.items);
						var _KPIMapValue = "";// 添加到Grid的KPIMapValue
						var _KPIValue = "";// 添加到Grid的KPIValue
						for (var j = 0; j < isForm.getForm()
								.findField('itemselector').toMultiselect.store
								.getCount(); j++) {
							_KPIMapValue += isForm.getForm()
									.findField('itemselector').toMultiselect.store
									.getAt(j).get('name');

							_KPIValue += isForm.getForm()
									.findField('itemselector').toMultiselect.store
									.getAt(j).get('title');

							if (j < isForm.getForm().findField('itemselector').toMultiselect.store
									.getCount()
									- 1) {
								_KPIMapValue += ",";
								_KPIValue += ",";
							}
						}
						operateGridPanel.getStore().getAt(_recordIndex).set(
								'KPIMap', _KPIMapValue);
						operateGridPanel.getStore().getAt(_recordIndex).set(
								'KPI', _KPIValue);

						win.hide();
						// if(_KPIValue != ""){
						// var recordArray = [];
						// recordArray.push(_recordIndex);
						// alert(_recordIndex);
						// //当前行所有列都有合法的值之后，把行设为选中状态
						// operateGridPanel.getSelectionModel().selectRows(recordArray);
						// }
					}
				}, {
					text : '取消',
					handler : function() {
						this.ownerCt.ownerCt.hide();
					}
				}]
			});

	/**
	 * Ext.grid.GridPanel
	 */
	operateGridPanel = new Ext.grid.EditorGridPanel({
				applyTo : 'analyseKPIGrid',
				height : 200,
				width : 1000,
				store : operateStore,
				cm : operateColumn,
				sm : checkModel,
				enableHdMenu : false,// True表示为在头部出现下拉按钮，以激活头部菜单。
				columnLines : true, // True表示为在列分隔处显示分隔符
				trackMouseOver : true, // 当鼠标移过行时，行是否要highlight
				stripeRows : true
			});

	/**
	 * window show之前触发的函数
	 * 
	 * @param {Object}
	 *            obj
	 */
	win.on('beforeshow', function(obj) {
		if ((ay_cbox.getValue() != null) || (ay_cbox.getValue() != "")) {
			if (ay_cbox.getValue() == 'landir') {
				var _left = ay_lander_cboxL.getValue();
				var _right = ay_lander_cboxR.getValue();
				// 获得ChangeTypeId
				isForm.getForm().findField('itemselector').fromMultiselect.store.baseParams = {
					xpath : _xpath + '/' + ay_cbox_value + '/' + _left + '-'
							+ _right + '/' + _recordChangeTypeId
				};

			} else {
				isForm.getForm().findField('itemselector').fromMultiselect.store.baseParams = {
					xpath : _xpath + '/' + ay_cbox_value + '/'
							+ _recordChangeTypeId
				};
			}
		}

		isForm.getForm().findField('itemselector').fromMultiselect.store.load();
		// 每次SHOW时REMOVE 右边的选择框
		isForm.getForm().findField('itemselector').toMultiselect.store
				.removeAll();
	});

	/**
	 * grid 单元格点击事件
	 * 
	 * @param {Object}
	 *            grid
	 * @param {Object}
	 *            rowIndex
	 * @param {Object}
	 *            columnIndex
	 * @param {Object}
	 *            e
	 */
	operateGridPanel.on('cellclick', function(grid, rowIndex, columnIndex, e) {
		_recordIndex = rowIndex;
		if (columnIndex == 4) {
			// 指标

			_recordChangeTypeId = grid.getStore().getAt(_recordIndex)
					.get(	'changeTypeId');// 获得当前行的ChangeTypeId
			if (_recordChangeTypeId != null) {
				win.show();
			} else {
				Ext.MessageBox.show({
							title : "友情提示",
							msg : "请选择切换类型",
							buttons : Ext.Msg.OK,
							width : 260,
							icon : Ext.MessageBox.INFO,
							fn : function() {
								// 回调函数
								grid.startEditing(rowIndex, 1);
							}
						});
			}
		} else if (columnIndex == 5) {
			// 删除
			grid.getStore().removeAt(rowIndex);
		}
	});

	/**
	 * grid 编辑后触发验证数据的事件
	 * 
	 * @param {Object}
	 *            e
	 */
	operateGridPanel.on('validateedit', function(e) {

		if (e.field == 'changeTypeId') {
			// 如果编辑的是COMBOBOX
			var _editFlag = false;
			for (var i = 0; i < e.grid.getStore().getCount(); i++) {
				if (e.grid.getStore().getAt(i).get('changeTypeId') == e.value) {
					e.cancel = true;
					_editFlag = true;
					Ext.MessageBox.show({
						title : "友情提示",
						msg : "不能添加相同的切换类型",
						buttons : Ext.Msg.OK,
						width : 260,
						icon : Ext.MessageBox.WARNING
					});
					break;
				}
			}
			//设置隐藏列的值，在验证grid的时候，把切换类型里的combox的显示值赋给隐藏列changeTitle 
			var comboxTitle = combo.getStore().getAt(combo.getStore().find(
					combo.valueField, e.value));
			// e.grid.getStore().getAt(_recordIndex).set("changeTitle", comboxTitle.get(combo.displayField)); 
			e.grid.getStore().getAt(_recordIndex).set("changeTitle",
					combo.getRawValue());
		}
	});
});