现在的位置: 首页 > 综合 > 正文

Ext系列form控件篇

2013年12月05日 ⁄ 综合 ⁄ 共 4518字 ⁄ 字号 评论关闭

在这里我们一块看一下form中几个控件,因为form控件较多这里只简单看几个比较有代表性的。

TextField

这个是最基本的form控件了,我们看一段代码:

当然,对于TextField前面已经说过,这里主要看一下验证。allowBlank表示是否可以为空,否则它将会显示blankText中的信息,但是请注意,这个信息的显示是以提示信息的形式显示的,必须加上Ext.QuickTips.init();
否则你是看不到错误信息的,而且我们通过Ext.form.Field.prototype.msgTarget = 'side';可以在验证未通过时在右侧警告
。而emptyText很明显就是为空时显示的内容,在后面我们还定义了输入信息的最长和最短的长度限制以及对应的提示信息。

效果如图:

上面是为空的验证,其实对于常用的验证Ext中也已经定义了,那就是vtype,假设我们要验证一个邮箱就可以在TextField中定义vtype属性为"email"定义验证失败的信息vtypeText为"邮箱格式不正确!"就可以了。

常用的vtype还有"alpha"(数字)、"alphanum"(数字和字母)、"url"。但是这样的验证显然还是不够,我们知道正则表达式做验证是最常见的一种手法,Ext当然也支持:

上面定义了一个很简单的正则表达是验证,显示了正则表达式在Ext中的用法。但是其实我们知道即使是这样有时还是不能够满足我们的要求的,这就必须应用Ext中的自定义验证。自定义验证也很简单,只需要先使用apply方法添加自定义函数然后在控件中像Ext中已有验证一样配置就可以了。假设现在我要选择一个日期段,肯定结束日期不能够小于开始日期,这样的验证我们怎么做呢?

我们首先添加了一个自定义函数(用Ext的apply方法)DateRange,在这个函数中我们有val、field两个参数,其中val就是要使用这个自定义函数的的控件的value值,field就是这个空间的属性集合。我们约定在使用这个函数的控件中定义一个cmpDate属性用来指定要比较的日期控件,然后在函数中我们得到这个空间的值(其实也就是其实日期的值),然后和val比较,如果val小于要比较的控件的值则返回false,否则为true。使用的时候就按照预定首先定义cmpDate,然后定义vtype为我们的自定义函数就可以了(和Ext中定义的常用vtype类型无二)。下面是我选择了08/01/2010后鼠标指针离开后的状态:

顺便说一下,上面仅仅定义了自控件,用的时候是在FormPanel中items中添加对象名称,由于后面的例子都是用这个fp对象作为容器,所以将代码贴出来:

Radio

Radio控件之前也用过,它和TextField控件还有些不同之处,我们一块看一下。我们之前定义过这样的代码,最为子控件放到fp中:

效果就是这样:

先不管它是否好看,上面定义的不是value属性而是inputValue,这个一定要说明,否则你得到的就不是你想要的value值(当然,CheckBox也是如此)。然后要说明的是它没有没有指定fieldLabel,如果我们指定了fieldLabel之后你会看到这样的效果:

显然这不是我们想要的,你肯定希望只有一个"性别"就可以了,而且两个radio在同一行中,这才是我们通常看到的。那么我们该如何来做呢?这个我们暂时先不管,后面我们会专门探讨Ext布局。另外对于CheckBox和Radio是类似的,我们也不再说了。

FieldSet

这是一个容器组件,很简单,我们直接看代码(这里用上面定义的tfUserName和tfUserPwd作为其子控件):

运行效果:

ComboBox

这个控件功能十分强大,很多动态复杂的功能它都有,我们这里暂且不探讨他的交互性,后面会有专门的内容去说,这里只看一些基本用法。

运行效果:

那么我们如何取得ComboBox的值呢?其实比较简单,在上面的cbName加上listeners配置:

上面我用三种方法取得ComboBox的值。

好,暂且到这里了!

抱歉!评论已关闭.