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',// 隐藏域的namehiddenId : 'comboValue',// 隐藏域的IDhiddenValue : '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的KPIMapValuevar _KPIValue = "";// 添加到Grid的KPIValuefor (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, // 当鼠标移过行时，行是否要highlightstripeRows : 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();// 获得ChangeTypeIdisForm.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');// 获得当前行的ChangeTypeIdif (_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') {// 如果编辑的是COMBOBOXvar _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());}});});