Extjs GridField 总结
此代码为完整代码,其中包含定位、使用 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 总结的更多相关文章
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- ExtJS 4.2 介绍
本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1 ...
- ExtJS 4.2 第一个程序
本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index ...
- ExtJS 4.2 组件介绍
目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...
- ExtJS 4.2 组件的查找方式
组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...
- ExtJS 4.2 业务开发(一)主页搭建
本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...
- ExtJS 4.2 业务开发(二)数据展示和查询
本篇开始模拟一个船舶管理系统,提供查询.添加.修改船舶的功能,这里介绍其中的数据展示和查询功能. 目录 1. 数据展示 2. 数据查询 3. 在线演示 1. 数据展示 在这里我们将模拟一个船舶管理系统 ...
- ExtJS 4.2 业务开发(三)数据添加和修改
接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
随机推荐
- SSM ehcache 配置 mapper 文件出错
异常 十二月 26, 2017 1:44:49 下午 org.apache.tomcat.util.digester.SetPropertiesRule begin 警告: [SetPropertie ...
- SpringMVC之请求部分
1.接收请求之限定请求类型 只接受Post请求 @RequestMapping(value="",method=RequestMethod.POST) 只接受get请求 @Requ ...
- 纯JavaScript开发飞机大战项目
开发工具: HBuilder 编程语言:JavaScript 其他技术:Html + Css 项目截图: 视频: 源代码: 在线观看地址: (暂无) 百度网盘下载地址: 请加QQ群:915 ...
- Java_jdbc 基础笔记之五 数据库连接 (ResultSet)
/** * ResultSet: 结果集. 封装了使用 JDBC 进行查询的结果. * 1. 调用 Statement 对象的 executeQuery(sql)可以得到结果集. * 2. Resul ...
- php异步处理
<?php namespace Index\Controller; use Core\Controller; class test extends Controller { public fun ...
- win10 'make' 不是内部或外部命令
win10 解决“ 'g++' 不是内部或外部命令,也不是可运行的程序或批处理文件”的问题 https://www.jianshu.com/p/9bffbaf12bed windows下提示make不 ...
- 新一代互联网传输协议QUIC
QUIC(Quick UDP Internet Connections,快速UDP互联网连接)是Google提出的一种基于UDP改进的通信协议,其目的是降低网络通信的延迟,提供更好的用户互动体验. Q ...
- HmacSHA256摘要算法
mac(Message Authentication Code,消息认证码算法)是含有密钥散列函数算法,兼容了MD和SHA算法的特性,并在此基础上加上了密钥. 甲乙双方进行数据交换可以采取如下流程完成 ...
- python3 selenium模块Chrome设置代理ip的实现
python3 selenium模块Chrome设置代理ip的实现 selenium模块Chrome设置代理ip的实现代码: from selenium import webdriver chrome ...
- Flutter -------- BottomNavigationBar 界面切换
Android 中有BottomNavigationBar+Fragment切换 而在Flutter也有的BottomNavigationBar 效果图 底部有两种情况 底部导航栏的类型更改其项目的显 ...