首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

具有CellEditing的ExtJs 4 GridPanel:输入的数据在验证失败时丢失

具有CellEditing的ExtJs 4 GridPanel:输入的数据在验证失败时丢失,这个问题涉及到了前端开发和数据验证。在ExtJs 4中,GridPanel是一个常用的组件,而CellEditing是GridPanel的一个插件,用于实现单元格编辑功能。

当用户在GridPanel中编辑单元格时,可能会输入不符合预期的数据,例如输入了不正确的格式或超出了范围等。为了避免这种情况,可以在数据验证失败时采取一定的措施,例如恢复原始数据或提示用户重新输入。

在ExtJs 4中,可以通过监听CellEditing的beforeedit事件来实现数据验证。在事件处理函数中,可以对用户输入的数据进行验证,如果验证失败,可以使用record.reject()方法恢复原始数据,或者使用Ext.Msg.alert()方法提示用户重新输入。

以下是一个示例代码:

代码语言:javascript
复制
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1,
    listeners: {
        beforeedit: function(editor, e, eOpts) {
            // 在这里进行数据验证
            if (e.value === '') {
                Ext.Msg.alert('错误', '输入不能为空');
                return false;
            }
            if (isNaN(e.value)) {
                Ext.Msg.alert('错误', '输入必须是数字');
                return false;
            }
            if (e.value < 0 || e.value > 100) {
                Ext.Msg.alert('错误', '输入必须在0到100之间');
                return false;
            }
        }
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    // ...
    plugins: [cellEditing],
    // ...
});

在这个示例中,我们使用了CellEditing的beforeedit事件来进行数据验证,如果验证失败,则使用Ext.Msg.alert()方法提示用户重新输入。

总之,在使用具有CellEditing的ExtJs 4 GridPanel时,需要注意进行数据验证,以确保用户输入的数据符合预期的格式和范围。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

EXT表格

数据(Data)     有了表格骨架,现在我们要向里边添加数据了。...数据读取     定义好数据之后,我们需要将其转换为能够为grid所用页面,ext为咱们提供了一个桥梁,Ext.data.Store,通过它我们可以把任何格式数据转化成grid可以使用形式,这样就不需要为每种数据格式写一个...现在咱们就来看看这个Ext.data.Store是如何转换三种数据。...proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。     现在我们用是Ext.data.MemoryProxy,它是专门用来解析js变量。...这些是跟cm定义中dataIndex对应。这样cm就知道哪列应该显示那条数据了。 记得要执行一次ds.load(),对数据进行初始化。

5.2K30
  • ExtJs学习笔记(2)_Basic GridPanel

    //创建数据表格 var grid = new Ext.grid.GridPanel({ store: store, columns: [...,默认情况下linq to sql设计器生成T_Class类里,是不支持序列化ExtJs调用时无法正确序列成JSON字符串,需要手动类前加上数据契约 [DataContract],属性前加上[...二步是必须,目的是为了生成Restful WCF,可以ExtJs里用类似"MyService.svc/GetClsData"这样url来访问 b.Extjs调用前端页面 <%@ Page Language...,必须是id对应列,否则出错 4.服务端类中,如果有DateTime字符字段,需要手动修改dbml对应cs文件,把DateTime改成string,否则序列化时,会产生很怪值,估计是.Net...序列化成JSONbug. 5.为了减少生成JSON字符串大小,可以仅在需要输出类属性上标记[DataMember],这样在生成JSON字符串,不会包含未标记为[DataMember]字段

    1.8K90

    EXT.NET高效开发(一)——概述

    虽然我不讨厌JS,但是能不写,我不会多手。让EXT.NET搞定这些吧。。 3)错误率降低。 这点不需要解释。当然只是相对Extjs。一般情况下,我写JS都是小心翼翼4)可维护性。...EXT.NET支持各种数据源,支持各种数据源控件。支持页面后台绑定,也支持xml、Ajax请求等等。 8)使用更快捷。 控件一拖(虽然我一般不拖),JS、CSS链接不需要操心了。...一间想不起来了。有想到就回复下吧。嘿嘿。 那相比WebForm,Ext.NET优势又在哪呢?这里我也会结合生产力说说(这里我就用++和--来标注好了)。 1)更好用户体验。...虽然extJs界面看多了,也就那么“美”,但是你要考虑到还有很多人没看够。 3)都支持服务器事件。这点打平了。 4)EXT.NET或者Extjs还不够完善。...比如设置了GridPanelAutoExpandColumn属性(自动展开列),但是这个列名自己又疏忽了(也就是不存在),那么页面将不显示,也不会有异常提示显示。这时候就得自己分析原因啦。

    1.1K30

    EXT.NET复杂布局(二)——报表

    MinLengthText="输入年份必须为四位数!"...很简单配置。 列合计。待会看源码。 过滤掉0。如果是0,则什么都不显示,否则显示蓝色数字。因为这个报表测试数据干了,我又懒,所以大家想象一下数据就好了。据说画饼充饥是有效果,当然不是我说。...《EXT.NET高效开发(一)——概述》我说过,“7)数据交换更简单”。应该是“数据交互”,本人比较懒,只在这里更正申明下好了,我也是刚看到。这里Store,是在后台赋值。...然后绑定时候,使用LINQ to DataTable进行了过滤。这个报表不会有多少数据。...也就是说,如果可以,你完全可以动态生成整个GridPanel。 最后说点。Extjs与JQuery框架是不冲突,井水不犯河水。

    1.1K20

    VueExtJS+SpringBoot打造双版本通讯录管理系统

    ExtJS 版本是大三《数据库编程》课程设计,Vue 版本是工作后因个人兴趣编写版本,如有不足之处敬请谅解。 所有源代码及数据库文件文章底部,需要请自取,谢谢!...前端 Extjs JQuery 后端 SpringBoot Jpa 数据库 MySql 8.0.30 模块预览 首先是 ExtJS 版本登陆页,是暗黑风格登陆模块,登陆界面需要输入标准三大套件:账号...当然也有注册页面,注册就要多填一些数据,实现逻辑大致一样,如下图所示。 提示:请注意验证表单右边哦! 登陆之后就是主页了,主页就让人看着清爽,简简单单几个静态打字,如下图所示。...Vue 版本登陆界面如下所示,用户需要输入登陆账号、密码和图形验证码。 项目支持企业微信扫码登陆,当然需要在项目后端配上你自己企业 ID 和应用 ID,如下图所示。...作者拥有本软件构建后应用系统全部内容所有权及独立知识产权。 如有问题,欢迎仓库 Issue 留言,看到后会第一间回复。相关意见会酌情考虑,但没有一定被采纳承诺或保证。

    33010

    ExtJs+WCF+LINQ实现分页Grid

    上篇文章《用ExtJs+Linq+Wcf打造简单grid 》,这个网格控件不带分页,本文在上文基础上添加分页功能,文中会着重介绍如何在用LINQ返回分页数据,如何使ExtJs与WCF进行Restful...第一步:vs2008中创建一个支持.Net Framework 3.5,名称为:ExtJs_Wcf_Linq_PageGridAsp.Net网站, ?...第三步:本文示例中,我们使用SQL2005自带示例数据库AdventureWorks中数据表Product,默认情况下该示例数据库可能未安装,要安装此数据库,可以查阅SQL2005中文档与教程中...创建好Products.dbml之后,打开vs2008服务器资源管理器,服务器资源管理器中添加对数据库AdventureWorks数据连接,然后将该库中数据表Product拖到Products.dbml...、 拖动成功之后,便有vs2008IDE自动生成了有关Product实体类和linq操作数据表Product操作类:ProductsDataContext,可视化界面中也能有如下显示: ?

    1.9K70

    ExtjsGridPanel数据导出到Excel方法

    前些时间老大说客户要求提供将表格中数据导出到Excel中,因为有时候他们需要将价格资料导出以便制作报价表,于是上网找了一些资料,发现网上其实有很多例子都有浏览器兼容性问题,于是自己整合,改进之后,终于能兼容支持和浏览器了...,遂在这里与大家分享、交流: 首先你需要一个将GridPanel数据转换成标准Excel格式JS文件,文件内容如下(貌似CSDN博客不支持上传文件给大家下载,所以唯有直接贴代码了): // JavaScript...* * @author Animal * */ /** * base64 encode / decode * * @location http...文件中,需要用到时候再加载就可以了。...事实上这个文件是比较大,并且导出GridPanel功能可能很多页面都可能被需要,所以个人认为一开始就以标签对形式加载很浪费资源,因为事实上很多时候用户并不需要这个功能。

    1.1K10

    【网安学术】基于ExtJSV**管理系统设计与实现

    这种模式相当于基于Web数据库浏览模式[2]。用户界面完全通过Web浏览器实现,且对客户端硬件要求不高,具有很强开放性,易于扩展。...用户登录界面输入正确用户名和登录口令,验证通过后,系统再根据其所赋予权限进行判断,给出相应可操作界面。系统登录设计基于ExtJS界面框架、采用Ajax技术进行数据交互。...执行添加终端装置操作,业务逻辑层验证处理用户传来数据后,交由底层数据访问层进行数据存储。完成装置添加后,切换到策略管理界面执行新建隧道操作。...如此,这将大大提高ExtJSIE下性能,使得网页响应变快,IE对其兼容性变强。 3.3 数据实现 后台数据库采用SQLite软件存储数据。...4 结 语 通过对前端框架及服务端开发技术预研分析,结合经典系统架构,根据系统功能需求及性能需求,完成对各功能模块具体设计及细化后操作设计后,最终完成了整个主站加密装置管理系统开发实现。

    1K10

    ExtJs十三(ExtJs Mvc图片管理之三)

    现在要完成目录编辑操作。因为目录编辑只是改变目录名称,因而使用Cellediting插件就可完成工作。...Cellediting插件在编辑完成后,会触发edit事件,因而在这时候提交数据是最合适,代码如下: edit:function(edit,e){...如果提交成功后需要根据返回数据修改记录id,并调用commit方法确认修改。如果修改失败,就要调用reject方法取消修改。...配置DiskCache作用是开启磁盘缓存,它会把生成缩略图缓存在磁盘上,这样就不用访问相同缩略图,每次都要去生成了。...定义路径中,会看到文件名后多了参数width和height定义,而ImageSize路由中检查到访问虚拟路径,就会根据width和height定义来将图片转换为缩略图所需宽度和高度,然后返回给客户端

    3.9K30

    ExtJs二(实现登录)

    开始动手  1.解决方案资源管理器中选择Scripts\ExtJS\ux目录,单击右键选择添加,新建项,弹出窗口中选择Jscript文件,并将名称修改为login.js(以后项目的可直接将该文件复制到该目录...如果想要在脚本中使用ExtJS提示信息,可将书附带资源包中Ext.js文件复制到ExtJS目录中,复制后,解决方案资源管理器将Ext.js拖到到login.js文件中,就会生成以下代码:  //...一般登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证图片、登录和重置按钮。因而需要用到ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...登录按钮预设为禁用。formBind配置作用是只有表单内输入符合要求才能使用该按钮,这个设计Ext JS4也是新加入,很方便,不再需要自己去写代码实现这个了。...登录失败(failure配置项),只写了一个空函数目的是因为表单提交返回数据格式是一样,处理方式也一样,因而可使用同一个函数进行处理,但是还没写到,因而先保留一个空函数。

    2.1K10

    ExtJs二(实现登录)

    开始动手  1.解决方案资源管理器中选择Scripts\ExtJS\ux目录,单击右键选择添加,新建项,弹出窗口中选择Jscript文件,并将名称修改为login.js(以后项目的可直接将该文件复制到该目录...如果想要在脚本中使用ExtJS提示信息,可将书附带资源包中Ext.js文件复制到ExtJS目录中,复制后,解决方案资源管理器将Ext.js拖到到login.js文件中,就会生成以下代码:  //...一般登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证图片、登录和重置按钮。因而需要用到ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。...登录按钮预设为禁用。formBind配置作用是只有表单内输入符合要求才能使用该按钮,这个设计Ext JS4也是新加入,很方便,不再需要自己去写代码实现这个了。...登录失败(failure配置项),只写了一个空函数目的是因为表单提交返回数据格式是一样,处理方式也一样,因而可使用同一个函数进行处理,但是还没写到,因而先保留一个空函数。

    1.9K20

    ExtJs四(ExtJs MVC登录窗口调试)

    将原来调用alert方法语句删除,然后加入显示登录窗口代码: Ext.ux.Login.show();  现在,页面打开首页,将看到如下图 ? 单击一下图片,验证码也可刷新了。...这里有个问题一定要注意,模型中字段名称必须与定义表单字段name名称一致,不然后台字段与前台字段就对应不上了。  ...= null) { vcode =Session["vcode"].ToString(); } 下面就对验证码进行验证了,因为Session有可能超时丢失验证码,因而在验证时候,必须保证验证码不能为空字符...当验证错误时候,将错误写入errors对象,这样登录窗口就可知道是验证码错误了。...如果验证成功,返回success为true,则表示登录成功了。 然后对login.js登录事件添加提示信息,登录成功的话,弹出登录成功提示框,失败的话,弹出登录失败提示框。

    2.6K40

    ExtJs四(ExtJs MVC登录窗口调试)

    将原来调用alert方法语句删除,然后加入显示登录窗口代码: Ext.ux.Login.show();  现在,页面打开首页,将看到如下图 ? 单击一下图片,验证码也可刷新了。...这里有个问题一定要注意,模型中字段名称必须与定义表单字段name名称一致,不然后台字段与前台字段就对应不上了。  ...= null) { vcode =Session["vcode"].ToString(); } 下面就对验证码进行验证了,因为Session有可能超时丢失验证码,因而在验证时候,必须保证验证码不能为空字符...当验证错误时候,将错误写入errors对象,这样登录窗口就可知道是验证码错误了。...如果验证成功,返回success为true,则表示登录成功了。 然后对login.js登录事件添加提示信息,登录成功的话,弹出登录成功提示框,失败的话,弹出登录失败提示框。

    4.4K20

    java swing开发窗体程序开发(一)GUI编程

    [这个是关闭整个程序,将会关闭所有窗口] } 需要注意是,设置位置和大小时,即setBounds,一共有4个参数,前面两个是坐标信息,即x,y坐标。...使用add(String text,Component c);//这个函数来指定选项卡名字和组件之间对应关系 选项卡位置构造JTabbedPane对象可以指定,其构造函数参数为int类型,实际是一个静态常量...且显示出来组件将会占据该容器所有空间 使用该种布局容器添加组件 add(String s,Component c) s只是一个代号,方便以后显示这个组件找到 cardlayout对象...()方式 4:GridLayout布局:即格子布局,将容器划分为若干行和若干列,小格子添加组件 需要注意是:这些小格子大小不能改,所有格子强制大小相同,且排列顺序是从左到右,一行排完后再提行...函数,更新验证

    2.7K30
    领券