Ext系列form控件篇

标签： ext正则表达式functionemailfpregex

2010-08-16 20:03 6711人阅读 评论(3)收藏举报

本文章已收录于：

分类：

Javascript（15）

作者同类文章X

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

1. TextField
2. Radio
3. FieldSet
4. ComboBox

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

TextField

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

[javascript] view plain copy

print?

1. Ext.QuickTips.init();//显示提示信息  
2. Ext.form.Field.prototype.msgTarget = 'side'; //验证未通过时在对应的控件右侧显示红色提示  
3. var tfUserName=new Ext.form.TextField({  
4.     id:"userName",  
5.     name:'userName',  
6.     width:"auto",  
7.     height:"auto",  
8.     //renderTo:"divTextBox",//其实对于这类控件很少用renderTo，一般作为子控件  
9.     allowBlank:false,  
10.     blankText:"请输入信息...",//是否为空校验失败时显示的信息  
11.     emptyText:"请输入您的密码...",//为空时显示的信息  
12.     fieldLabel:'用户名',  
13.     //hideLabel:"false",  
14.     inputType:"text",  
15.     maxLength:10,  
16.     maxLengthText:"不好意思，最多只能输入10个字符！",//这样会给出红线提示但不会显示这些信息  
17.     minLength:6,  
18.     minLengthText:"不好意思，最少需要输入6个字符！",  
19.     value:""  
20. });   

Ext.QuickTips.init();//显示提示信息Ext.form.Field.prototype.msgTarget = 'side'; //验证未通过时在对应的控件右侧显示红色提示var tfUserName=new Ext.form.TextField({ id:"userName", name:'userName', width:"auto", height:"auto", //renderTo:"divTextBox",//其实对于这类控件很少用renderTo，一般作为子控件 allowBlank:false, blankText:"请输入信息...",//是否为空校验失败时显示的信息 emptyText:"请输入您的密码...",//为空时显示的信息 fieldLabel:'用户名', //hideLabel:"false", inputType:"text", maxLength:10, maxLengthText:"不好意思，最多只能输入10个字符！",//这样会给出红线提示但不会显示这些信息 minLength:6, minLengthText:"不好意思，最少需要输入6个字符！", value:""});

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

效果如图：

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

[javascript] view plain copy

print?

1. var tfEmail=new Ext.form.TextField({  
2.     id:"email",  
3.     name:'email',  
4.     width:"auto",  
5.     height:"auto",  
6.     fieldLabel:'邮箱',  
7.     inputType:"text",  
8.     vtype:'email',  
9.     vtypeText:'邮箱格式不正确'  
10. });   

var tfEmail=new Ext.form.TextField({ id:"email", name:'email', width:"auto", height:"auto", fieldLabel:'邮箱', inputType:"text", vtype:'email', vtypeText:'邮箱格式不正确'});

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

[javascript] view plain copy

print?

1. var tfUserPwd=new Ext.form.TextField({  
2.     id:"userPwd",  
3.     name:'userPwd',  
4.     width:"auto",  
5.     height:"auto",  
6.     allowBlank:false,  
7.     blankText:"密码不能为空！",  
8.     emptyText:'请输入用户密码...',  
9.     fieldLabel:'用户密码',  
10.     inputType:"password",  
11.     regex:/^/d$/,  
12.     regexText:"只能输入数字！",  
13.     //validator:function(){Ext.Msg.alert("系统提示","密码只能为数字格式！");},  
14.     validateEvent:"keyup",  
15.     invalidText:"您只能输入数字",  
16.     value:""  
17. });   

var tfUserPwd=new Ext.form.TextField({ id:"userPwd", name:'userPwd', width:"auto", height:"auto", allowBlank:false, blankText:"密码不能为空！", emptyText:'请输入用户密码...', fieldLabel:'用户密码', inputType:"password", regex:/^/d$/, regexText:"只能输入数字！", //validator:function(){Ext.Msg.alert("系统提示","密码只能为数字格式！");}, validateEvent:"keyup", invalidText:"您只能输入数字", value:""});

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

[javascript] view plain copy

print?

1. Ext.apply(Ext.form.VTypes,{  
2.     DateRang:function(val,field){  
3.         cmpdt=Ext.get(field.cmpDate);//cmpDate是我们自定义属性,指示要跟谁比较  
4.         if(cmpdt)//是否定义cmpDate  
5.         {  
6.             if(val  
7.                 Ext.Msg.alert("系统警告","起始日期大于终止日期，请重新选择");  
8.                 if(field.id){  
9.                     Ext.getCmp(field.id).setValue("");  
10.                 }  
11.                 return false;  
12.             }else{  
13.                 return true;  
14.             }  
15.         }else{  
16.             return true;  
17.         }  
18.     }  
19. });  
20. var dfStart=new Ext.form.DateField({  
21.     id:'startDate',  
22.     name:'startDate',  
23.     width:'auto',  
24.     height:'auto',  
25.     fieldLabel:'起始日期'  
26. });  
27. var dfEnd=new Ext.form.DateField({  
28.     id:'endDate',  
29.     name:'endDate',  
30.     width:'auto',  
31.     height:'auto',  
32.     fieldLabel:'结束日期',  
33.     cmpDate:'startDate', //自定义属性，指示跟谁比较  
34.     vtype:'DateRang'//我们定义的vtype类型  
35.     //vtypeText:'其实日期不得大于终止日期！'  
36. });   

Ext.apply(Ext.form.VTypes,{ DateRang:function(val,field){ cmpdt=Ext.get(field.cmpDate);//cmpDate是我们自定义属性,指示要跟谁比较 if(cmpdt)//是否定义cmpDate { if(val Ext.Msg.alert("系统警告","起始日期大于终止日期，请重新选择"); if(field.id){ Ext.getCmp(field.id).setValue(""); } return false; }else{ return true; } }else{ return true; } }});var dfStart=new Ext.form.DateField({ id:'startDate', name:'startDate', width:'auto', height:'auto', fieldLabel:'起始日期'});var dfEnd=new Ext.form.DateField({ id:'endDate', name:'endDate', width:'auto', height:'auto', fieldLabel:'结束日期', cmpDate:'startDate', //自定义属性，指示跟谁比较 vtype:'DateRang'//我们定义的vtype类型 //vtypeText:'其实日期不得大于终止日期！'});

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

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

[javascript] view plain copy

print?

1. var fp=new Ext.form.FormPanel({ //注意：Ext.form.FormPanel=Ext.FormPanel  
2.     title:'用户登录',  
3.     width:300,  
4.     bodyStyle:'padding:5px 5px 0',  
5.     renderTo:'divFormPanel',  
6.     frame:true,//在此，这个属性就很重要了，如果不为true，你会看到下面的button和panel看起来是分开的  
7.     url:'login.aspx',//提交地址  
8.     method:'post',//提交方法  
9.     defaults:{ //在这里同一定义item中属性，否则需要各个指明  
10.         xtype:'textfield',  
11.         labelAlign:'left',  
12.         labelWidth:60,  
13.         width:100  
14.     },  
15.     items:[  
16.         dfStart,  
17.         dfEnd  
18.     ],  
19.     buttonAlign:'center',//按钮对其方式  
20.     buttons:[  
21.         {  
22.             text:'确定'  
23.         },  
24.         {  
25.             text:'取消',  
26.             handler:function(){//点击取消按钮的操作事件  
27.                 fp.hide();  
28.             }  
29.         }  
30.     ]  
31. });   

var fp=new Ext.form.FormPanel({ //注意：Ext.form.FormPanel=Ext.FormPanel title:'用户登录', width:300, bodyStyle:'padding:5px 5px 0', renderTo:'divFormPanel', frame:true,//在此，这个属性就很重要了，如果不为true，你会看到下面的button和panel看起来是分开的 url:'login.aspx',//提交地址 method:'post',//提交方法 defaults:{ //在这里同一定义item中属性，否则需要各个指明 xtype:'textfield', labelAlign:'left', labelWidth:60, width:100 }, items:[ dfStart, dfEnd ], buttonAlign:'center',//按钮对其方式 buttons:[ { text:'确定' }, { text:'取消', handler:function(){//点击取消按钮的操作事件 fp.hide(); } } ]});

Radio

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

[javascript] view plain copy

print?

1. var rdSexFemale=new Ext.form.Radio({  
2.     boxLabel:'女',  
3.     name:'sex',  
4.     id:'sexFemale',  
5.     value:'女'  
6. });  
7. var rdSexMale=new Ext.form.Radio({  
8.     boxLabel:'男',  
9.     name:'sex',  
10.     id:'sexMale',  
11.     checked:true,  
12.     inputValue:'男'  
13. });   

var rdSexFemale=new Ext.form.Radio({ boxLabel:'女', name:'sex', id:'sexFemale', value:'女'});var rdSexMale=new Ext.form.Radio({ boxLabel:'男', name:'sex', id:'sexMale', checked:true, inputValue:'男'});

效果就是这样：

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

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

FieldSet

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

[javascript] view plain copy

print?

1. var fs=new Ext.form.FieldSet({  
2.     title:'用户信息',  
3.     autoWidth:true,  
4.     autoHeight:true,  
5.     collapsible:true,  
6.     items:[  
7.         tfUserName,  
8.         tfUserPwd  
9.     ]  
10. });   

var fs=new Ext.form.FieldSet({ title:'用户信息', autoWidth:true, autoHeight:true, collapsible:true, items:[ 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:&quot;姓名必须选择&quot;, //autoSelect:true, //selectOnFocus:true //获得焦点时是否选中文本}); </textarea>

运行效果：

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

[javascript] view plain copy

print?

1. listeners:{  
2.     'select':function(arg){  
3.         Ext.Msg.alert("系统信息","方法一："+arg.value+" 方法二："+Ext.getCmp('cbName').getValue()+" 方法三："+Ext.get("cbName").dom.value);  
4.     }  
5. }   

listeners:{ 'select':function(arg){ Ext.Msg.alert("系统信息","方法一："+arg.value+" 方法二："+Ext.getCmp('cbName').getValue()+" 方法三："+Ext.get("cbName").dom.value); }}

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

好，暂且到这里了！

顶

1

踩

0

 

 

• 上一篇ExtJs之FormPanel篇
• 下一篇Snagit处理特殊截图

我的同类文章

Javascript（15）

http://blog.csdn.net

• •使用SWFUpload进行多文件上传2011-11-30阅读3115
• •ExtJs典型用法之文件上传2010-11-02阅读10909
• •Javascript和Json中的单引号、双引号问题2010-10-26阅读6008
• •运行Ajax请求响应中的Javascript代码2010-09-05阅读2559
• •ExtJS之布局篇2010-08-28阅读59151

• •ExtJs之GridPanel、FormPanel综合篇2010-11-16阅读13081
• •ExtJs之TreePanel篇2010-10-28阅读8276
• •ExtJs之ComboBox篇2010-09-12阅读8461
• •ExtJs之GridPanel篇2010-09-05阅读6121
• •Ext系列之菜单栏和工具栏2010-08-28阅读7125

更多文章