Ext系列form控件篇
来源:互联网 发布:我国云计算市场规模 编辑:程序博客网 时间:2024/06/05 02:29
在这里我们一块看一下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
这个控件功能十分强大,很多动态复杂的功能它都有,我们这里暂且不探讨他的交互性,后面会有专门的内容去说,这里只看一些基本用法。
<textarea cols="50" rows="15" name="code" class="javascript">var cbName = new Ext.form.ComboBox({ id:'cbName', store: ['所有人员','剑心','神谷熏','左之助','弥彦'], fieldLabel:'姓名', emptyText:'请选择姓名...', triggerAction:'all', //这个属性极其重要,如果不加这个你在选择了一个值之后下列列表中就只剩下这个值了,其他的没有了 editable:false, //是否可以编辑 readOnly:false //如果为true的话就不能选了 //allowBlank:false, //blankText:"姓名必须选择", //autoSelect:true, //selectOnFocus:true //获得焦点时是否选中文本}); </textarea>
运行效果:
那么我们如何取得ComboBox的值呢?其实比较简单,在上面的cbName加上listeners配置:
上面我用三种方法取得ComboBox的值。
好,暂且到这里了!
- Ext系列form控件篇
- Ext系列form控件篇
- Ext系列form控件篇
- Ext遍历form控件
- EXT.NET--FORM控件
- Ext.NET控件介绍—Form控件
- 汉化ejxjs ext.form.datefield控件
- 汉化ejxjs ext.form.datefield控件
- Extjs Ext.form.ComboBox() 控件分页
- Ext.form.DateField控件属性说明
- EXT 篇,ext简单布局,ext form提交
- Ext.form
- ext form
- Ext.form
- ext--form
- Ext.form
- Ext入门学习系列五--表格控件
- Ext中FormPanel面板及Form控件横排测试(CSS)
- 蓝牙基带数据传输机理分析
- Bluetooth:蓝牙中的自适应跳频技术
- Junit和Ant入门(二) Ant
- 在bluez4.32协议栈中执行hcitool cc,连接成功后又断开
- 如何写批处理文件
- Ext系列form控件篇
- Linux0.11---head.s分析
- 实习时,更新入库的操作
- 关于JAVA中的servlet
- 算法导论学习笔记-第8章 线性时间排序
- 写在七夕——关于爱情
- 第 一次成功下载的喜悦
- asp.net输出缓存和数据缓存
- 蔡明介出山难改“三强争霸”格局形成