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());
}
});
});
详细解决方案
Ext 中由Combobox跟itemselector组成的editorGrid
热度：153 发布时间：2012-11-07 09:56:10.0
相关解决方案
- 哪位高手能帮写一个 LWUIT 下的 combobox 下拉菜单源码 可运行的
- ASP.NET ComboBox 控件，散分
- 让EXCEL单元格具有下拉列表功能（ComboBox）解决方法
- ComboBox 上拉选单中，765行选取后，再选就出错
- combobox 的 rowsourcetype 有structure popup collection 是什么意思?该怎么处理
- ExtJs ComboBox 上拉数据较多时，怎么提供模糊搜索
- ExtJs ComboBox 下拉数据较多时，怎么提供模糊搜索
- easyui ComboBox 有关问题！
- 求帮解决 Ext combobox 取值有关问题
- ExtJs ComboBox 上拉数据较多时，怎么提供模糊搜索
- Extjs combobox 数据远程调用有关问题，求帮助
- editorgrid 编辑后，获取所修改的字段名以及修改之后的值，并且传到后台，保存到数据库，请教怎么操作？求指教
- ExtJs4.0 扩张控件（itemselector）
- Extjs ComboBox 刷新有关问题
- jquery easyui combobox getvalue() 请用过的 帮助下
- ext itemselector 旋钮
- Ext ComboBox 默许选中某一项
- 组合框（ComboBox）的施用
- jQuery MiniUI 开发课程 表单控件 ComboBox：联动选择（十）
- jQuery MiniUI 开发教程 表单控件 ComboBox：上拉选择框（九）
- 重现EXT combobox 二级联动
- ComboBox 组件应用
- Ext.form.ComboBox setValue()初始值设定有关问题
- easyui combobox 搜寻速给接分 大侠们赶快来瞧瞧 作死的感觉
- extjs combobox 级连,该怎么处理
- jquery easyui combobox 怎么聚焦
- Ext ComBobox 顺带完整附件
- Ext.form.ComboBox 本土和远程模式的基本定义
- Ext combobox 上拉多选框带搜索功能
- [Ext JS 4] 实战之 ComboBox 和 DateField (消失之解决方法)