此代码为完整代码,其中包含定位、使用 Enter 键,来实现 Tab 键。

Ext.define('xxx.recordBook.view.EditGrid', {
extend: 'Ext.form.field.GridField',
xtype: 'xxx',
id: 'xxx',
store: {
type: 'xxx.instrumentdata.editInstrumentData'
}, requires: [
'Ext.grid.selection.SpreadsheetModel',
'Ext.grid.plugin.Clipboard'
],
plugins: [
cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
overrideInitComponent: function (config) {
delete config.viewConfig;
return config;
},
selModel: {
type: 'spreadsheet',
columnSelect: true,
pruneRemoved: false,
extensible: 'y'
}, disabled: true,
getColumns: function (dataColumns) {
var columns = [{
/* 观测时间 */
text: l('Monitors.InstrumentData.MeasureTime'),
dataIndex: 'measureTime',
xtype: 'datecolumn',
format: l('Format.DateTime'),
width: 200,
editor: {
maxValue: Ext.Date.format(new Date(), 'Y-m-d H:i:s'),
xtype: "datetimefield",
name: 'measureTime',
defaultTime: '00:00:00'
}
}];
if (dataColumns != "") {
columns = columns.concat(dataColumns);
} columns = columns.concat(
[{
/* 记录日志 */
text: l('Monitors.InstrumentData.Note'),
dataIndex: 'note',
flex: 1,
editor: {
allowBlank: true
} }]
);
return columns;
}, initComponent: function () {
var me = this;
this.map = new Map(); me.items = me.getColumns('');
me.callParent(arguments); },
buttons: [{
text: l('PreviousSiteRecordBook'),
handler: 'preSiteRecordBook',
iconCls: 'fa fa-window-close'
},
{
text: l('Save'),
handler: 'saveRecordBook',
iconCls: 'fa fa-save',
},
{
text: l('NextSite'),
handler: 'nextSiteRecordBook',
iconCls: 'fa fa-save',
}
],
init: function (record, data) {
var me = this;
Esms.getInstrumentDataEditColumn(record.instrumentTypeId, function (columns, result) {
me.dataTemplate = JSON.parse(result.instrumentType.dataTemplate);
me.result = result;
try {
me.chartTemplate = JSON.parse(result.template.chartTemplate);
} catch (error) { } finally {
me.odata = data;
var cols = me.getColumns(columns);
me.setColumns(cols);
var position = {
row: 0,
column: 1
};
var cellEditing = me.plugins[0];
cellEditing.startEditByPosition(position);
} }, function () { }, true); //初始化10行 rowEditing 数据露
var measureTime = window.measureTime == undefined ? new Date(new Date().format('yyyy-MM-dd ')) : window.measureTime; if (me.getStore().data.items.length == 0) {
me.getStore().insert(0, {
measureTime: new Date(measureTime).format('yyyy-MM-dd hh:mm:ss'),
flag: false
});
} //初始化10行
// for (var i = 1; i < 10; i++) {
// me.getStore().insert(i, {
// measureTime: ''
// });
// }
},
listeners: {
beforeedit: function (editor, context, e) {
var me = this;
var row = context.rowIdx;
var grid = Eui.frame.Ui.getActiveTab().down("monitors-recordbook-editGrid");
try {
context.cell.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && (e.keyCode == 13 || e.keyCode == 108)) { // enter键 要做的事情
e.stopPropagation();
if (context.field == "note") { //保存当前行数据
//下一个测点
me.getController().nextSiteRecordBook(me); } else { ///触发Tab 移动到下一格
var position = {
row: row,
column: context.colIdx + 1
};
try {
var cellEditing = grid.plugins[0];
cellEditing.startEditByPosition(position);
} catch (error) {
console.log(error)
} }
};
}
} catch (error) {
console.log(error);
} try {
setTimeout(function () { Ext.query('input[name=measureTime]')&&Ext.query('input[name=measureTime]')[0]&&Ext.query('input[name=measureTime]')[0].select(); }, 100);
} catch (error) {}
},
edit: function (editor, context, e) { var number = context.rowIdx;
var me = this;
//获取当前行数据
var editing = editor.context.record.data;
var flag = false; //修改测量时间和备注不用计算
if (context.field == 'note' || context.field == "measureTime") {
flag = false;
} else {
//比对必填项是否以填
for (var i = 0; i < this.dataTemplate.length; i++) {
var data = this.dataTemplate[i];
if (data.expression == "") {
if (editing[data.map] == null) {
return;
}
flag = true;
editing['flag'] = true;
}
}
} //数据计算数据:那该条数据去后台计算结果
if (flag) {
var data = context.record.data;
me.calculation(data, number);
}
}, },
copyData: function (str) {
this.getStore().removeAt(0);
var me = this;
var rows = str.split('\r\n');
var lists = [];
for (var i = 0; i < rows.length; i++) {
var element = rows[i];
if (element == "") break;
var columns = element.split("\t");
var data = {};
//判断复制内容中是否包含日期
var k = 0;
if (isNaN(Number(columns[k]))) {
data.measureTime = columns[k];
k = 1;
} else {
data.measureTime = new Date(window.measureTime).format('yyyy-MM-dd hh:mm:ss');
}
for (j = 0; j < this.dataTemplate.length; j++) {
if (this.dataTemplate[j].expression == '') {
var it = isNaN(Number(columns[k])) ? 0 : Number(columns[k]);
data[this.dataTemplate[j].map] = it;
k++;
}
}
if (k < columns.length) {
data.note = columns[k];
}
delete data.id;
this.getStore().insert(i, data);
me.calculation(data, i);
}
},
calculation: function (data, number) {
var me = this;
data.instrumentId = this.record.instrumentId;
data.projectId = AppConfig.data.projectId;
window.measureTime = data.measureTime;
Ext.Ajax.request({
url: Api.app.instrumentData.findInstrumentData.url,
method: Api.app.instrumentData.findInstrumentData.method,
jsonData: {
instrumentData: data
},
success: function (response) {
var avatarData = Ext.util.JSON.decode(response.responseText);
var result = avatarData.result;
me.saveData(result, number);
}
});
},
saveData: function (result, number) {
var me = this;
me.map.set(number, result); var tab = Eui.frame.Ui.getActiveTab();
var instrumentGrid = tab.down("monitors-instrumentdata-grid");
var record = instrumentGrid.getStore().getData().items;
var newData = [];
for (var i = 0; i < me.map.size; i++) {
var data = me.map.get(i);
data.instrumentName = me.record.name;
newData.push({
data: data
});
} me.setGraph(record.concat(newData));
},
setGraph: function (records) {
var me = this;
var obj = [];
for (var i = 0; i < records.length; i++) {
var r = records[i];
obj.push(r.data)
} //排序
obj.sort(function (a, b) {
var nowdate = new Date();
var temp1 = new Date(a.measureTime);
var temp2 = new Date(b.measureTime);
var dc1 = Math.abs((parseInt(nowdate - temp1) / 1000));
var dc2 = Math.abs((parseInt(nowdate - temp2) / 1000));
if (dc1 < dc2) {
return -1;
} else if (dc1 > dc2) {
return 1;
} else {
return 0;
}
}); var tab = Eui.frame.Ui.getActiveTab(); var iframe = tab.getEl().dom.querySelector('iframe');
if (iframe) {
if (iframe.contentWindow && iframe.contentWindow.inited) {
var frame = iframe.contentWindow;
me.gb = frame.editor.initChart(me.result, obj, me.dataTemplate);
}
}
} })

Extjs GridField 总结的更多相关文章

  1. ExtJS 4.2 评分组件

    上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...

  2. ExtJS 4.2 介绍

    本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...

  3. ExtJS 4.2 第一个程序

    本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...

  4. ExtJS 4.2 组件介绍

    目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

  5. ExtJS 4.2 组件的查找方式

    组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...

  6. ExtJS 4.2 业务开发(一)主页搭建

    本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...

  7. ExtJS 4.2 业务开发(二)数据展示和查询

    本篇开始模拟一个船舶管理系统,提供查询.添加.修改船舶的功能,这里介绍其中的数据展示和查询功能. 目录 1. 数据展示 2. 数据查询 3. 在线演示 1. 数据展示 在这里我们将模拟一个船舶管理系统 ...

  8. ExtJS 4.2 业务开发(三)数据添加和修改

    接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...

  9. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

随机推荐

  1. SSM ehcache 配置 mapper 文件出错

    异常 十二月 26, 2017 1:44:49 下午 org.apache.tomcat.util.digester.SetPropertiesRule begin 警告: [SetPropertie ...

  2. SpringMVC之请求部分

    1.接收请求之限定请求类型 只接受Post请求 @RequestMapping(value="",method=RequestMethod.POST) 只接受get请求 @Requ ...

  3. 纯JavaScript开发飞机大战项目

    开发工具: HBuilder 编程语言:JavaScript 其他技术:Html + Css 项目截图:   视频:   源代码:   在线观看地址: (暂无) 百度网盘下载地址: 请加QQ群:915 ...

  4. Java_jdbc 基础笔记之五 数据库连接 (ResultSet)

    /** * ResultSet: 结果集. 封装了使用 JDBC 进行查询的结果. * 1. 调用 Statement 对象的 executeQuery(sql)可以得到结果集. * 2. Resul ...

  5. php异步处理

    <?php namespace Index\Controller; use Core\Controller; class test extends Controller { public fun ...

  6. win10 'make' 不是内部或外部命令

    win10 解决“ 'g++' 不是内部或外部命令,也不是可运行的程序或批处理文件”的问题 https://www.jianshu.com/p/9bffbaf12bed windows下提示make不 ...

  7. 新一代互联网传输协议QUIC

    QUIC(Quick UDP Internet Connections,快速UDP互联网连接)是Google提出的一种基于UDP改进的通信协议,其目的是降低网络通信的延迟,提供更好的用户互动体验. Q ...

  8. HmacSHA256摘要算法

    mac(Message Authentication Code,消息认证码算法)是含有密钥散列函数算法,兼容了MD和SHA算法的特性,并在此基础上加上了密钥. 甲乙双方进行数据交换可以采取如下流程完成 ...

  9. python3 selenium模块Chrome设置代理ip的实现

    python3 selenium模块Chrome设置代理ip的实现 selenium模块Chrome设置代理ip的实现代码: from selenium import webdriver chrome ...

  10. Flutter -------- BottomNavigationBar 界面切换

    Android 中有BottomNavigationBar+Fragment切换 而在Flutter也有的BottomNavigationBar 效果图 底部有两种情况 底部导航栏的类型更改其项目的显 ...