Ext.onReady(function(){ /* * EditorGridPanel的工作过程 * 1、用户点击单元格 * 2、单元格按照预设的组件显示单元格的内容并处于编辑状态 * 3、离开单元格的编辑状态 * 4、更新编辑后的内容,出现三角号表示已经被修改过 * 5、程序内部变化:将记录设置为脏读数据状态,并将修改后的记录存放在Record类型的数组modified中。 */ //准备数据 var data = [ {id:1,date:new Date(),name:"吕鹏",address:"中华人民共和国",bank:"中国光大银行",isFast:true}, {id:2,date:new Date(),name:"张三",address:"中华人民共和国",bank:"中国农业银行",isFast:false}, {id:3,date:new Date(),name:"李四",address:"中华人民共和国",bank:"中国商业银行",isFast:false}, {id:4,date:new Date(),name:"王五",address:"中华人民共和国",bank:"中国招商银行",isFast:false} ]; //Proxy var proxy = new Ext.data.MemoryProxy(data); //描述数据结构 var Order = Ext.data.Record.create( [ {name:"ID",type:"int",mapping:"id"},//编号 {name:"DATE",type:"date",mapping:"date"},//日期 {name:"NAME",type:"string",mapping:"name"},//姓名 {name:"ADDRESS",type:"string",mapping:"address"},//地址 {name:"BANK",type:"string",mapping:"bank"},//银行 {name:"ISFAST",type:"boolean",mapping:"isFast"}//银行 ] ); //Reader var reader = new Ext.data.JsonReader({},Order); //Store 列模型中的dataIndex必须和Human结构中的name属性保持一致 var store = new Ext.data.Store({ proxy:proxy, reader:reader, autoLoad:true, pruneModifiedRecords:true }); //交易银行 var banks = [ ["中国光大银行","中国光大银行"], ["中国农业银行","中国农业银行"], ["中国商业银行","中国商业银行"], ["中国招商银行","中国招商银行"] ] //列模型 var cm = new Ext.grid.ColumnModel([ {header:"订单编号",dataIndex:"ID",width:60,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false}))}, {header:"下单日期",dataIndex:"DATE",width:140,renderer:new Ext.util.Format.dateRenderer("Y-m-d"),editor:new Ext.grid.GridEditor(new Ext.form.DateField({ format:"Y-m-d" }))}, {header:"收货人姓名",dataIndex:"NAME",width:120,editor:new Ext.grid.GridEditor(new Ext.form.TextField())}, {header:"收货人地址",dataIndex:"ADDRESS",editor:new Ext.grid.GridEditor(new Ext.form.TextField())}, {header:"交易银行",dataIndex:"BANK",width:120,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({ fields:["value","text"], data:banks }), displayField:"text", valueField:"value", mode:"local", triggerAction:"all", readOnly:true, emptyText:"请选择银行" }))}, {header:"快递",dataIndex:"ISFAST",width:70,renderer:function(v){return v?"快递":"非快递"},editor:new Ext.grid.GridEditor(new Ext.form.Checkbox())} ]); //EditorGridPanel定义 var grid = new Ext.grid.EditorGridPanel({ store:store, cm:cm, autoExpandColumn:"ADDRESS", width:800, autoHeight:true, renderTo:"a", autoEncode:true, //提交时是否自动转码 tbar:[{ text:"添加一行", cls:"x-btn-text-icon", handler:function(){ var initValue = { ID:"", DATE:new Date(), NAME:"", ADDRESS:"", BANK:"", ISFAST:false }; var order = new Order(initValue); grid.stopEditing(); grid.getStore().add(order); //设置脏数据 order.dirty = true; //只要一个字段值被修改了,该行的所有值都设置为脏读标记 order.modified = initValue; if(grid.getStore().modified.indexOf(order) == -1){ grid.getStore().modified.push(order); } } },{ text:"删除一行", cls:"x-btn-text-icon", handler:function(){ var sm = grid.getSelectionModel(); if(sm.hasSelection()){ Ext.Msg.confirm("提示","真的要删除选中的行吗?",function(btn){ if(btn == "yes"){ var cellIndex = sm.getSelectedCell();//获取被选择的单元格的行和列索引 var record = grid.getStore().getAt(cellIndex[0]); grid.getStore().remove(record); } }); }else{ Ext.Msg.alert("错误","请先选择删除的行,谢谢"); } } },"-",{ text:"保存", // icon:"", cls:"x-btn-text-icon", handler:function(){ var store = grid.getStore(); //得到修改过的Recored的集合 var modified = store.modified.slice(0); //将数据放到另外一个数组中 var jsonArray = []; Ext.each(modified,function(m){ //alert(m.data.ADDRESS);//读取当前被修改的记录的地址 //m.data中保存的是当前Recored的所有字段的值json,不包含结构信息 jsonArray.push(m.data); }); var r = checkBlank(modified); if(!r){ return; }else{ //通过ajax请求将修改的记录发送到服务器最终影响数据库 Ext.Ajax.request({ method:"post",//最好不要用get请求 url:"../../../editGridServlet", success:function(response,config){ var json = Ext.util.JSON.decode(response.responseText); //grid.getStore().reload(); Ext.Msg.alert("提交成功",json.msg); }, params:{data:Ext.util.JSON.encode(jsonArray)} }); } } }] }); //删除一行时,同步数据库 grid.getStore().on("remove",function(s,record,index){ var jsonArray = [record,data];//因为servlet只处理数组,所以先变成数组 if(record.data.ID != ""){ Ext.Ajax.request({ method:"post", url:"../../../editGridServlet", params:{data:Ext.util.JSON.encode(jsonArray),action:"delete"}, success:function(response,config){ var msg = Ext.util.JSON.decode(response.responseText); //grid.getStore().reload(); Ext.Msg.alert("",msg.msg); } }); } }); //验证是否输入的数据是有效的 var checkBlank = function(modified/*所有编辑过的和新增加的Record*/){ var result = true; Ext.each(modified,function(record){ var keys = record.fields.keys;//获取Record的所有名称 Ext.each(keys,function(name){ //根据名称获取相应的值 var value = record.data[name]; //找出指定名称所在的列索引 var colIndex = cm.findColumnIndex(name); //var rowIndex = grid.getStore().indexOfId(record.id); //根据行列索引找出组件编辑器 var editor = cm.getCellEditor(colIndex).field; //验证是否合法 var r = editor.validateValue(value); if(!r){ Ext.MessageBox.alert("验证","对不起,您输入的数据非法"); result = false; return; } }); }); return result; } });
extjs editgrid增加一行
转载于:https://www.cnblogs.com/muzi131313/articles/4121895.html
相关文章:

unity 骨骼击碎_保证击碎$ 100挑战的创新策略
unity 骨骼击碎by Glenn Gonda由Glenn Gonda 保证击碎$ 100挑战的创新策略 (A Creative Strategy Guaranteed to Crush the $100 Challenge) Before I became a software engineer, I made my living as a recording studio engineer. I have a non-traditional background an…

mac下安装libpng环境
用go写一个爬虫工具时需要使用一个go的库,而这个库有需要使用libpng库,不然编译就会提示说 png.h找不到等之类的信息,于是想到应该和windows一样需要安装gcc环境,然后让gcc里安装libpng这个库, 解决办法: 终…

linux oracle修改编码utf8
$ sqlplus /nolog SQL> connect sys/oracle as sysdba SQL> startup 如何设置ORACLE数据库的编码(ZHS16GBK)修改成UTF8 SQL> shutdown immediate; SQL> startup mount; SQL> alter system enable restricted session; SQL> alter sy…

Vue.js 数据绑定渲染Demo
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 <div id"app">{{ message }} </div>var app new Vue({el: #app,data: {message: Hello Vue!} })Hello Vue!

angular搭建项目步骤_建立健康的Angular项目应采取的步骤
angular搭建项目步骤by Ashish Gaikwad通过Ashish Gaikwad 建立健康的Angular项目应采取的步骤 (Steps you should take to build a healthy Angular project) 使用Jenkins SonarQube创建您的“ Angular Fitbit” (Create your “Angular Fitbit” with Jenkins SonarQube) …

数据库的三大范式和事物
来源:http://blog.csdn.net/w__yi/article/details/19934319 1.1 第一范式(1NF)无重复的列 1.2 第二范式(2NF)属性完全依赖于主键 [ 消除部分子函数依赖 ] 1.3 第三范式(3NF)属性不依赖于其它非…

过滤器和包装器
作者:禅楼望月 过滤器要做的事情 请求过滤器 完成安全检查 重新格式化请求首部或体 建立请求审计或日志响应过滤器 压缩响应流 追加或修改响应流 创建一个完全不同的响应注意不能把过滤器的顺序依赖性硬编码进程序中,它应该由DD控制。 过滤器很像Servlet…

Missing space before value for key 'path'vue.js解决空格报错
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 找到 webpack.base.config.js文件注释掉下面的东西!! module: { rules: [ /*{ test: /\.(js|vue)$/, loader: eslint-loader, enforce: "p…

现代hy-9600音响_从音响工程师到软件工程师-为什么我要学习编码
现代hy-9600音响by Kalalau Cantrell通过Kalalau Cantrell 从音响工程师到软件工程师-为什么我要学习编码 (From Sound Engineer to Software Engineer — Why I’m Learning to Code) I seriously started teaching myself to code several months ago. I say “seriously” …

微信服务号、公众号、企业号注册
转载于:https://www.cnblogs.com/zhoulaoshi/p/6536850.html

a标签onclick事件解析
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 简单介绍<a>标签的常用点击事件的写法及作用 a href"javascript:void(0);" οnclick"js_method()" //javascript:void(0);作用是返回undefined,地址不发生跳转&am…

安卓版文字扫描识别软件
安卓版文字扫描识别软件 文字识别软件被越来越多的人使用,在使用的过程中也发现了一些问题。总结这些问题发现,很多人对软件能够批量识别这个问题比较关注。如果实现批量识别就可以节省时间。但是一些软件还不能实现批量识别,还有的软件能够做…

中级前端笔试_在短短8个月内如何获得中级前端开发人员的角色
中级前端笔试by Matthew Burfield通过马修伯菲尔德(Matthew Burfield) 在短短8个月内如何获得中级前端开发人员的角色 (How I got a mid-level front end developer role in just 8 months) Three weeks ago I landed a mid-level front-end developer role at a startup. Our…

用stm32f10x建立新的工程重要步骤
stm32f10x系列新建空的工程主要原理: 1.添加启动文件 不同的芯片类型的启动文件的容量是不同的,选择适合该芯片的容量作为启动文件。 注意:启动文件是汇编语言编写的,所以文件的后缀名为.s 2.添加时钟配置 配置文件 stm32f10x.的系…

随机生成6位图片验证码
1. [代码][C#]代码 /// <summary> /// PicHandler1 的摘要说明 /// </summary> public class PicHandler1 : IHttpHandler, IRequiresSessionState { private string mCheckNo string.Empty; protected ImgBuilder _ImgBuilder new I…

html 页面传值
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 直接上代码,JS保存全局变量的三种方式。 创建一个新的JS文件, //quanju.js window.localStorage.JQa"JQA"; window.localStorage.setItem(JQb,JQB);//利用localStora…

node.js的开发流程_Node.js子流程:您需要了解的一切
node.js的开发流程by Samer Buna通过Samer Buna Node.js子流程:您需要了解的一切 (Node.js Child Processes: Everything you need to know) 如何使用spawn(),exec(),execFile()和fork() (How to use spawn(), exec(), execFile(), and fork…

对象存在性检测集中管理
在中大型业务系统中, 常常需要从数据库中查询某个实体对象。 在进行处理之前, 必须先检测该实体是否存在,以增强系统的健壮性。 不过, 检测代码充斥在主业务流程中又会大大降低业务逻辑的清晰性, 最好集中起来进行管理…

20155204 2016-2017-2 《Java程序设计》第3周学习总结
20155204 2016-2017-2 《Java程序设计》第3周学习总结 教材学习内容总结 一个原始码中可以有多个类定义,但只能有一个公开类。留心Scanner对于每一种类型的nextxxxx()方法以Java开头的都是API提供的类使用Integer.valueOf()也是为基本类型建立打包器的方式之一Integ…

js表单提交,支持图片上传,包含后端php代码
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 <html><head><meta http-equiv"Content-Type" content"charsetutf-8" /><title>图片上传成功</title></head><body><form name"…

如何破解汽车-快速的速成课程
by Kenny Kuchera肯尼库切拉(Kenny Kuchera) 如何破解汽车-快速的速成课程 (How to hack a car — a quick crash-course) The goal of this article is to get you started hacking cars — fast, cheap, and easy. In order to do this, we’ll spoof the RPM gauge as an e…

367. Valid Perfect Square
题目: Given a positive integer num, write a function which returns True if num is a perfect square else False. Note: Do not use any built-in library function such as sqrt. Example 1: Input: 16 Returns: TrueExample 2: Input: 14 Returns: False 链接…

使用reuseport和recvmmsg优化UDP服务器
http://skoo.me/system/2014/03/18/udp-server-performance/ http://www.helplib.net/s/linux.die/65_3223/man-2-recvmmsg.shtml recvmmsg(2) - Linux man page转载于:https://www.cnblogs.com/jingzhishen/p/4145732.html

js把for循环出来的数据存入数组
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 var obj [];for(var i 0;i<obj.length;i){arr.push(obj[i]);}; console.obj(arr); 1:obj是一个数组对象 2:push()方法是数组的栈底添加 意思是往数组的底部添加 3:…

flexbox布局_这是您可以使用FlexBox制作的5种布局
flexbox布局The CSS Flexible Box Layout — Flexbox — provides a simple solution to the design and layout problems designers and developers have faced with CSS. Let me show you how to use it to generate some common layouts and challenges that you will face …

数据结构之线性表
数据结构之线性表 目录 概述顺表特点 顺表的操作 准备 创建顺表 查询顺表长度 遍历顺表 按序查找 按值查找 插入 删除 链表实际使用概述 线性表是一种线性的存储结构,表头有唯一后继元素,表尾有唯一前驱元素,表中的元素既有前驱又有后继 顺表…

【BZOJ-3456】城市规划 CDQ分治 + NTT
题目链接 http://www.lydsy.com/JudgeOnline/problem.php?id3456 Solution 这个问题可以考虑dp,利用补集思想 N个点的简单图总数量为$2^{\binom{N}{2}}$,要求的是简单联通图,所以可以用总量减不连通的。 不连通的可以通过枚举与某个固定点的…

微信小程序获取openid和session_key并且把openid存入数据库
微信小程序开发交流qq群 581478349 微信小程序获取openid和session_key并且把openid存入数据库。已经调用openid的demo 前后端代码都有,后端php实现 在其它地方同步调用openid。(确保用户完成登录再进行后续的操作); onLoad…

如何通过五个简单步骤成为更好的Stack Overflow用户
by Artem Stepanenko由Artem Stepanenko 如何通过五个简单步骤成为更好的Stack Overflow用户 (How to become a better Stack Overflow user in five simple steps) Software developers cannot imagine their lives without Stack Overflow.没有堆栈溢出,软件开发…

wm_concat
select org_name,department,to_char(wm_concat(ebs_org_num)) from GHB.org_add_tmp group by org_name,department ; 转载于:https://www.cnblogs.com/pier22/p/6546726.html