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 ...
随机推荐
- 复习题之Blah数集
题目描述: 大数学家高斯小时候偶然间发现一种有趣的自然数集合Blah,对于已a为基的集合Ba定义如下: (1)a是集合Ba的基,且a是Ba的第一个元素: (2)如果x在集合Ba中,则2x+1,3x+1 ...
- CODE FESTIVAL 2017 qual C 题解
传送门 \(A\) 咕咕 const int N=15; char s[N];int n; int main(){ scanf("%s",s+1),n=strlen(s+1); f ...
- Xilinx ISE的时序约束
使用Synplify Pro加时序约束.综合完毕后,可以在ISE中进行布局.布线.需要用.ucf文件指定布局布线的时钟约束.前者可以比后者小. 早期的ISE,两个约束可以继承.现在用的高版本,反而需要 ...
- 本地Windows远程桌面连接阿里云Ubuntu服务器
本地Windows远程桌面连接阿里云Ubuntu 16.04服务器: 1.目的:希望通过本地的Windows远程桌面连接到阿里云的Ubuntu服务器,通过远程桌面图形界面的方式操作服务器. 2.条件: ...
- BurpSuite经常拦截firefox报文如success.txt的解决办法
因为工作需要经常使用Burp对收发报文进行检测,平时习惯使用火狐浏览器,但是火狐浏览器经常进行一些登录状态的检测,导致Burp拦截中出现大量的火狐报文,如http://detectportal.fir ...
- LArea插件选中城市,确定之后又很难再次选择城市?
加上fastclick.js这个js就能解决这个问题啦...... 详情:http://blog.csdn.net/zfy865628361/article/details/49512095
- PKUWC2020 游记
因为CSP-S挂的并不厉害,蜜汁来到了PKU,所以有了这篇游记. DAY 0 上午在机房颓废,中途还整了一个出校证. 九点多,两个THU的大神去拿笔记本和手机颓废了,不久被两个教练拉着和kx跑了出去. ...
- python判断字符串包含关系
转自---http://blog.csdn.net/yl2isoft/article/details/52079960 1.使用成员操作符 in >>> s='nihao,shiji ...
- Java逻辑分页代码
前台jsp代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...
- MYSQL Packet for query is too large (12054240 > 4194304). You can change this value on the server by setting the max_allowed_packet' variable.
MYSQL Packet for query is too large (12054240 > 4194304). You can change this value on the server ...