目录视图摘要视图订阅 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示(转)
原文地址:http://blog.csdn.net/kunoy/article/details/8007585
本文主要解决问题:
1、区分哪些文本框不允许为空,很多网站都采用在文本框后加*号,extjs也可以用lable组件标识,但这样做很麻烦,每一个不允许为空的文本框都需要多加一个lable组件,如果用一个方法自动为不允许为空的文本框加上这个*号,在form等布局的情况下,也是可行的,但如果是absolute布局,你会发现界面就不那么舒畅了。
2、添加文本框验证错误提示,如果你采用的是form布局,extjs已经自带了在文本框后加一个红色感叹号的提示,但往往很多界面采用的是absolute布局,这时红色感叹号就打死也不会出现了,本文就解决这一问题,并且在点击保存时统一验证每一个文本框,如果存在验证错误,提示错误信息并返回。
extjs自带的在form布局下的错误提示:
首先定义样式:
设置不允许为空的文本框属性如下:
当然如果一个界面需要设置的textField太多,可定义方法:
Ext.ComponentMgr.all.each(function(cmp){
var Type=cmp.getXType(); if(Type=='textfield'||Type=='fileuploadfield'||Type=='combo'||Type=='treecombo'||Type=='datefield'||Type=='numberfield'||Type=='textarea'||Type=='timefield'||Type=='trigger'){
if(cmp.allowBlank==false){
cmp.cls="Diy-text";
cmp.blankText="该输入项不能为空!";
}
}
});
}
初始化调用setDiyTextField()即可,效果如下:
说明:这里使用background-image,强制覆盖了extjs自己的文本框样式,不仔细看,其实差别很小。
下面该定义validateValue方法了,代码如下:
Ext.form.TextField.prototype.validateValue = function(value){
var iconid=this.id+"icon";
var con=document.getElementById(iconid);
var error = this.getErrors(value)[0];
if (error != undefined) {
this.markInvalid(error);
- setValidIcon(con,this);
- return false;
- }
- this.clearInvalid();
- return true;
- }
- function setValidIcon(con,obj){
- if(con==null){
- var x0=0,y0=0;
- x0=(obj.x+obj.getWidth()-18)||(obj.getWidth()+85);
- y0=obj.y||0;
- if(obj.getXType()=="combo"||obj.getXType()=='treecombo'||obj.getXType()=="datefield"||obj.getXType()=="fileuploadfield"){
- var wid=document.getElementById(obj.id).style.width;
- wid=wid.substring(0,wid.length-2);
- x0=Number(wid);
- y0=0;
- }
- var parentNode=document.getElementById(obj.id).parentNode;
- var newChild=document.createElement("div");
- newChild.setAttribute("name","invalid-icon");
- newChild.setAttribute("id",obj.id+"icon");
- newChild.setAttribute("class","x-form-invalid-icon");
- newChild.setAttribute("className","x-form-invalid-icon");
- newChild.setAttribute("style","left:"+x0+"px; top:"+y0+"px; visibility: visible;z-index:10;");
- parentNode.appendChild(newChild);
- }
- }
网上也有一段重写validateValue的方法,笔者也是从那里借鉴过来的,表示感谢,但那段代码直接从本质上重写了:自己写代码判断文本框是否为空,是否满足Vtype设置,是否满足validator函数等,其中就漏掉了日期控件对日期格式的验证方法,好吧,我们就去extjs里面找这段方法吧(笔者有点傻,还真去找了,可惜没找到)。最后仔细看了extjs的validateValue方法,都调用了getErrors()方法,也就是说所有错误验证都在这个方法里面,而我们并不需要改写这个方法,只是增加一个验证提示,故修改为:
- var error = this.getErrors(value)[0];
- if (error != undefined) {
- this.markInvalid(error);
- setValidIcon(con,this);
- return false;
- }
- this.clearInvalid();
- return true;
其中setValidIcon(con,this)就是增加错误提示。最后效果如下:
说明:笔者将红色感叹号设置在文本框范围内,从而不影响布局效果,使用getErrors之后,效果真完美,所有allowBlank,vtype,validator,maxValue,minValue,format等该验证的都验证了。
下面就解决如果清除这个感叹号提示,一种方法是在validateValue里增加清除,比如:
- Ext.form.TextField.prototype.validateValue = function(value){
- var iconid=this.id+"icon";
- var con=document.getElementById(iconid);
- var error = this.getErrors(value)[0];
- if (error != undefined) {
- this.markInvalid(error);
- setValidIcon(con,this);
- return false;
- }
- if(Ext.get(iconid)){
- Ext.get(iconid).remove();//在这里清除
- }
- this.clearInvalid();
- return true;
- }
由于联系到笔者之前写的clearAll()函数,即当你需要清空一个文本框,并且清除错误提示,不可能还另外多写一句Ext.get(iconid).remove()吧?故笔者再重写clearInvalid方法:
- Ext.form.TextField.prototype.clearInvalid=function(){
- if (this.rendered && !this.preventMark) {
- this.el.removeClass(this.invalidClass);
- var mt = this.getMessageHandler();
- if(mt){
- mt.clear(this);
- }else if(this.msgTarget){
- this.el.removeClass(this.invalidClass);
- var t = Ext.getDom(this.msgTarget);
- if(t){
- t.innerHTML = '';
- t.style.display = 'none';
- }
- }
- var iconid=this.id+"icon";
- if(Ext.get(iconid)){
- Ext.get(iconid).remove();
- }
- }
- this.unsetActiveError();
- }
到此完整解决了我们需要的提示,最后添加一个函数,当保存时判断哪些文本框是验证错误的。
- function checkVtype(){
- var re=true;
- Ext.ComponentMgr.all.each(function(cmp){
- var Type=cmp.getXType();
- if(Type=='textfield'||Type=='combo'||Type=='treecombo'||Type=='datefield'||Type=='numberfield'||Type=='textarea'||Type=='timefield'||Type=='trigger'){
- if(cmp.isVisible()){
- var va=cmp.isValid();
- re=va?re:va;
- }
- }
- });
- if(re==false)
- Ext.MessageBox.show({title: '错误',msg: "您输入的信息验证错误,请核对后再执行该操作!<br/><span style='color:brown;'>错误原因:</span><span style='color:red;'>格式不正确或输入值为空。</span>",buttons: Ext.MessageBox.OK,icon: Ext.MessageBox.ERROR});
- return re;
- }
checkVtype()返回true,验证正确,返回false,验证错误。
原文地址:http://blog.csdn.net/kunoy/article/details/8007585
目录视图摘要视图订阅 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示(转)的更多相关文章
- iOS 9应用开发教程之显示编辑文本标签文本框
iOS 9应用开发教程之显示编辑文本标签文本框 ios9显示.编辑文本 在iOS,经常会看到一些文本的显示.文字就是这些不会说话的设备的嘴巴.通过这些文字,可以很清楚的指定这些设备要表达的信息.本节将 ...
- 基于QT的webkit与ExtJs开发CB/S结构的企业应用管理系统
一:源起 1.何为CB/S的应用程序 C/S结构的应用程序,是客户端/服务端形式的应用程序,这种应用程序要在客户电脑上安装一个程序,客户使用这个程序与服务端通信,完成一定的 ...
- [转载]开发 Spring 自定义视图和视图解析器
原文出处 http://www.ibm.com/developerworks/cn/java/j-lo-springview/ 概述 Spring 3.0 默认包含了多种视图和视图解析器,比如 JSP ...
- IOS开发之视图和视图控制器
视图(View), 视图控制器(ViewController)是IOS开发UI部分比较重要的东西.在学习视图这一块的东西的时候,感觉和Java Swing中的Panel差不多.在UIKit框架中都有一 ...
- MVC 多级目录(控制器) 路由重写 及 多级Views目录 的寻找视图的规则
转自:[原]Asp.net Mvc 多级控制器 路由重写 及 多级Views目录 的寻找视图的规则 asp.net mvc 为了更好的控制views的页面存放,和控制器的可读性,需要分开多级目录来 ...
- Cocos2d-x 坑之一:Xcode文件真实目录与工程视图目录
Cocos2d-x一定要保证 Xcode文件真实目录与工程视图目录 的一致性,不然,会出现文件读取不了,或include不了的情况. 如果出现此类情况,优先查看真实目录的结构.
- SQL点滴17—使用数据库引擎存储过程,系统视图查询,DBA,BI开发人员必备基础知识
原文:SQL点滴17-使用数据库引擎存储过程,系统视图查询,DBA,BI开发人员必备基础知识 在开发过程中会遇到需要弄清楚这个数据库什么时候建的,这个数据库中有多少表,这个存储过程长的什么样子等等信息 ...
- 基于Extjs+SpringMVC+MyBatis+Oracle的B/S信息系统简化开发思路
要在上层简化就得有下层强大的架构作为支撑,通过采用企业级的各种框架,虽然学习成本高一些,但用好了效率也自然高. 数据层简化: 首先所有表都有名称为ID的主键字段.有与表同名的序列作为自增key. 数据 ...
- iOS 9应用开发教程之多行读写文本ios9文本视图
iOS 9应用开发教程之多行读写文本ios9文本视图 多行读写文本——ios9文本视图 文本视图也是输入控件,与文本框不同的是,文本视图可以让用户输入多行,如图2.23所示.在此图中字符串“说点什么吧 ...
随机推荐
- http://blog.sina.com.cn/s/blog_4dd787e40102uysg.html
http://blog.sina.com.cn/s/blog_4dd787e40102uysg.html
- ms sql 在任何位置 添加列
摘自: http://bbs.csdn.net/topics/40236129 在任何位置插入列:create proc addcolumn@tablename varchar(30), --表名@ ...
- 转:一位10年Java工作经验的架构师聊Java和工作经验
黄勇( 博客),从事近十年的 JavaEE 应用开发工作,现任阿里巴巴公司系统架构师.对分布式服务架构与大数据技术有深入研究,具有丰富的 B/S 架构开发经验与项目实战经验,擅长敏捷开发模式.国内开源 ...
- java源码阅读Observable(观察者模式)
1类签名和简介 package java.util; public class Observable Observable是Java内置的观察者模式中的主题类(没错,是类不是接口),和其对应的观察者接 ...
- 最简单的方式用上https
1.在这个网站申请ssl证书 https://www.sslforfree.com 2.下载的证书使用这个脚本处理一下 #!/bin/bash HOST_NAME=$1 cp certificate. ...
- vue - config(dev.env.js和prov.env.js)
描述:配置产品模式.打包模式:开发还是打包,以最佳运行(不配置则有一个大大的Warning!!!) 官网:https://www.webpackjs.com/concepts/mode/
- 如何在Jconsole 监控 Jboss Tomcat
Java在jdk5开始就自带有Jconsole了,要想用Jconsol监控且需要添加启动参数: Linux系统:JAVA_OPTS="$JAVA_OPTS -Dcom.sun.man ...
- ant 重置(修改)DatePicker MonthPicker Cascader 的值
1.清空值 this.props.form.resetFields(); 2.监听 props 的变化,触发 清空按钮 .
- STL源码剖析(迭代器)
在STL中,容器跟算法是分开设计的,算法是通过迭代器来对容器进行操作的. 在算法运用迭代器的时候,可能会用到其相应的型别,例如返回值为容器中元素的型别,又或者说根据迭代器的类型来选择更好的算法等等. ...
- MySQL中 order by 与 limit 的执行顺序以及使用实例
在 MySQL 执行查询的时候,我们可能既要对结果集进行排序又要限制行数,那么此时 order by 与 limit 的执行顺序是怎么样的呢? order by与limit的执行顺序是:先执行orde ...