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 ...
随机推荐
- tensorflow serving 模型部署
拉去tensorflow srving 镜像 docker pull tensorflow/serving:1.12.0 代码里新增tensorflow 配置代码 # 要指出输入,输出张量 #指定保存 ...
- npm 更新包
方法一手动跟新: 手动修改package.json中依赖包版本,执行npm install --force,强制从远程下载所有包更新本地包 方法二使用第三方插件: npm install -g npm ...
- linux系统下常用的打包/解压缩包命令
此处大概列了常用的解压和打包命令,详细信息需要百度一一对比他们的区别,比如我们在下载软件时就是最好的实践. 用zip举例说明,使用命令压缩时有点是,压缩文件.目录会非常快:如图,我压缩了一个progr ...
- 优雅地使用eruda在移动端上调试网页
注:本文有一小部分截图为桌面端,但所有内容都亲测在移动端上可用. 你曾否在洛谷上用<F12>把错的数据点改成AC?是否有过自己尝试搭建网站,在移动端上js代码运行出错?如果你的回答是肯定的 ...
- ciscn2019华北赛区半决赛day2_web1题解
比赛结束以后采用非官方复现平台做的题,和比赛题有轻微不同,比赛中存放flag的table是ctf,这里是flag. 题目地址 buuoj.cn 解题过程 题目中只有一个页面,需要提交id. id为1, ...
- T-MAX-测试总结
一.项目相关: 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 T-MAX组--测试总结 团队名称 T-MAX小组 作业目标 将团队的项目做 ...
- Assignment4:闰年判断输入异常时的处理方法
一.问题描述 在输入界面输入年份,界面返回是否为闰年. 判断依据为:输入的数字可以被4整除但不可以被100整除 || 输入的数字可以被400整除 如果输入为数字以外的其他字符,会抛出异常.那么如何防止 ...
- Java web加密之将应用从http换成https的方法
转载:https://www.cnblogs.com/yangyang2018/p/8421453.html 感谢文章http://blog.csdn.net/zhangzuomian/article ...
- longitudinal models | 纵向研究 | mixed model
A longitudinal study refers to an investigation where participant outcomes and possibly treatments o ...
- Dart静态方法、对象操作符和类的继承
/* Dart中的静态成员: 1.使用static 关键字来实现类级别的变量和函数 2.静态方法不能访问非静态成员,非静态方法可以访问静态成员 */ // class Person { // stat ...