欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ext 中由Combobox和itemselector组成的editorGrid

程序员文章站 2022-07-13 22:38:09
...

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());
}
});
});