当前位置:首页 > java知识学习_java技术文章 > 正文

ext中allowblank属性动态设置与常见问题解答

浏览339+

一、属性介绍

allowblank是前端框架ext中的一个文本框的属性,主要用来验证文本框的输入值是否是必填项,实际意思就是该文本框的值是不是可以允许为空,语法如下:isEmpty( Mixed value, [Boolean allowBlank] )

该属性的默认值为true表示允许为空值,当设置为false时即为不允许为空值的情况,此时提交表单extjs底层会帮助你判断文本框的值是否为空,如果为空则表单不允许提交并提示相关不允许为空的信息,如果不为空则能够正确提交表单到程序后台。

allowblank属性验证不为为空只是其中的一个小功能,如果你认为它的功能仅限于此那你就大错特错了,该属性值还可以验证文本框的字符长度、字母或数字类型、正则表达式、函数验证等多项表单验证功能,具体验证类型详见下图:

allow能够验证的文本类型汇总一览图

二、allowblank属性用法与属性动态设置

extjs中创建组件时可以直接设置allowblank的属性值为true或者false,一般在new时都会这样使用,具体代码如下所示:

var nodeCheck = new Ext.form.TextField({
      fieldLabel: '验证xxx名称',
       id:'organCode',
       name: 'organCode',
       xtype: 'textfield',
       allowBlank: false,
       blankText: "名称不能为空!",
       anchor: '90%'
     });

以上代码虽然挺常用,但是有一个弊端就是当我们想要修改extjsallowblank的值时上面的代码是无法做到的,因为它初始化完成后就是静态的,如果我们想要通过点击事件或触发其它事件修改其属性值,只能通过下面的属性动态设置的代码实现:

Ext.getCmp(‘nodeCheck’).allowBlank = false;

三、常见问题解答

1、Extjs动态修改allowblank属性不管用的相关问题

尽管我们上面讲解了如何创建extjs的组件也讲解了如何使用触发事件下的动态设置属性,但有时候因为浏览器的兼容性问题或者是代码不知道哪里写的有误的情况下,上文中提到的属性设置的方式就是不管用,具体问题描述如下:

extjs属性设置不管用的问题描述

介于以上情况,多半是浏览器的兼容性的问题所致,我们可以试一下用如下代码解决,如果项目中需要考虑各个浏览器的兼容问题,则代码中需要判断哪个浏览器用哪种语法。

form.findById("id").allowBlank = true;
form.doLayout();

2、TextField文本框设置allowblank为flase时不能过滤空白验证

Ext.apply(Ext.form.TextField.prototype, {
      validator : function(text) {
       if (this.allowBlank == false
         && Ext.util.Format.trim(text).length == 0)
        return false;
       else
        return true;
      }
     });

有时候项目中的问题简直是千奇百怪,TextField文本框在做验证时,明明设置的是不允许为空值,但是实际测试时文本里面打了一个空格竟然验证通过了,真的是无语,这种情况需要我们用js代码获取该文本框的vlaue值判断其length长度等于零才行,然后再设置extjsallowblank=false,具体详见上面的代码案例。

 

相关文章推荐

Ext 如何更改 allowBlank属性的值? 求助
项目问题的需求是当有前端访问用户点击某个特定的菜单按钮时,可以触发表单的某个文本框做飞空值验证或者正则表达式验证,点击其它取消按钮时能够做到文本值可以为空并且取消验证的效果,有没有直接使用doLayout()方法进行操作的方式?
extjs 怎么动态设置combo的allowblank属性
combobox的属性值很多很复杂,一开始试用了很多方式均没能达到动态设置属性的效果,combo中的一个store属性是可以动态加载控件数据的,前提是一定要设置combo的id,否则没有效果,panel.add是可以触发事件设置allowblank的属性值的。
group by和order by的用法和区别
ORDER BY 语句默认按照升序对记录进行排序,order by一般是用来依照查询结果的某一列(或多列)进行排序,group by是按分组进行查询,order by是排序查询,二者根本就不是一回事,对数据库sql查询语句稍微有些经验的童鞋就能很清楚它们之间的区别。
extjs 解决rowEditing不满足allowBlank时,无法save的问题
工作中有个老项目需要做系统升级,前端用得是extjs框架,有个文本属性allowblank设置了属性true时提交按钮仍然显示灰色无法提交的情况,百思不得解,最后查询了各种资料终得到解决方案,就是自己代码中rowEditing组件。
ExtJS 6.7 的新增功能(节选)
ext6.7新版本更新后增加不少的新功能,比如表格数据筛选功能,用户可以根据日期选择和文本值模糊查询动态筛选表格数据,此外还提供了多选组合框以及拾色器等高端辅助功能,用户可以点击拾色器自由选择表单和表格的颜色变化,绚丽无比。
Ext Core中文手册下载
点此下载:http://pan.baidu.com/s/1c0q3Eow
jquery中简单ajax 例子与原理完整详解
ajax是一种在不刷新整个网页的情况下能够做到异步更新部分数据的技术,ajax的底层主要依赖于XMLHttpRequest对象,实现原理通俗地来讲实际上就是在前端用户和后端服务器之间加了一层缓冲作用的中间层,依赖js从而实现实现页面部分刷新。
瀑布流布局图片与css多种实现思路剖析
瀑布流布局在当下前端网页设计中越来越流行,该布局方式最主要的特点就是图片的宽度都是保持一致的,高度都是不尽相同的,随着鼠标滑轮的滚动各种图片错落有致的展现在用户眼前,极为吸引客户眼球。
jquery进度条效果与插件特效代码实现
基于jquery实现的的进度条能够形象地展示进度变化过程,div通过css样式控制动画效果给div动态填充背景颜色以到达柱状进度条的动态效果,还可以通过简单易学的插件做一下简单的配置化操作也能够达到美观的进度条效果。
html页面中CSS样式设置超链接下划线取消与显示
a标签这种添加了超链接之后就会默认自带下划线的,极其难看还不美观,本篇文章主要讲解通过控制css的相关样式,解决超链接下划线如何取消的问题。
责任声明:文章信息由IT教程屋小编精心整理总结编排而成,倾注了心血和汗水,转载时请遵循行业规范务必注明文章作者、来源及本页链接,谢谢合作!
本篇文章标题:ext中allowblank属性动态设置与常见问题解答
本篇文章url地址:http://www.itjcw123.cn/2650.html