表单在EXT中非常受欢迎，初看这些输入控件，好像只是修改了CSS样式而已，但是如果用Firebug查看一下DOM，似乎确实只有CSS发生了变化，隐藏在漂亮界面下的依然是原来的input控件，如果你想使用EXT提供的一些绚丽的功能，建议尝试EXT的表单(Form)和对应的输入控件。本文就是简单介绍表单与输入控件的使用方法。

一、创建一个简单的表单

1、具体配置信息参考上篇文章

2、创建简单表单的实现代码如下所示：

view plaincopy to clipboardprint?
  1. <mce:script type="text/javascript"><!--  
  2.         Ext.onReady(function(){  
  3.             var form=new Ext.form.FormPanel({  
  4.                 defaultType:'textfield',  
  5.                 labelAlign:'right',  
  6.                 title:'form',  
  7.                 labelWidth:50,  
  8.                 frame:true,  
  9.                 width:220,  
  10.                 items:[{  
  11.                     fieldLabel:' 文本框'  
  12.                 }],  
  13.                 buttons:[{  
  14.                     text:'按钮'  
  15.                 }]  
  16.             });  
  17.             form.render("div1");              
  18.         });  
  19.       
  20. // --></mce:script>  

 

3、注意HTML中无需定义太多东西，只需要定义个div id='div1'就可以实现，初始配置显然变得更紧凑，利用items和buttons指定包含的控件和按钮。具体实现效果如图1所示。

1

图1 简单的表单

二、FormPanel和BasicForm详解

如上面的实例所示，我们需要定义一个Ext.form.FormPanel,然后在里面设置field,引入Ext.form.FormPanel 的最大好处就是利于布局，Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把 Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分，同时也可以利用items指定 Ext.form.FormPanel内部的子组件。如其他的Panel一样，我们可以通过xtype来指定每个子组件的类型，而不必手工创建它们。

三、EXT支持的控件

EXT提供了TextField、TextArea、CheckBox、Radio、ComboBox、DateField、HtmlEditor 这些通用控件，以及Ext 2.0新增的Hidden和TimeField.

3.1 文本输入控件Ext.form.TextField

直接继承Ext.form.Field，这是一个专门用来输入文本数据的输入控件，最常用的功能就是可以检测内部输入的数据是否为空，还可以控制输入数据的内容以及最大最小长度，如下面的代码所示：

view plaincopy to clipboardprint?
  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.TextField({  
  3.                 fieldLabel:'输入',  
  4.                 allowBlank:false,  
  5.                 emptyText:'请输入…',  
  6.                 maxLenght:50,  
  7.                 minLength:10  
  8.             });  
  9.             form.render("div1");              
  10.         });  

 

3.2 多行文本输入控件Ext.form.TextArea

Ext.form.TextArea也是用来输入文本的输入控件，与Ext.form.TextField不同之处在于它可以输入多行文本，除此以外，两者的用法都是相同的。如下面代码所示,preventScrollbars是用于防止出现滚动条的。

view plaincopy to clipboardprint?
  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.TextArea({  
  3.                 width:200,  
  4.                 grow:true,  
  5.                 preventScrollbars:true,  
  6.                 fieldLabel:'empty',  
  7.                 allowBank:false,  
  8.                 emptyText:'空',  
  9.                 maxLength:50,  
  10.                 minLength:10  
  11.             });  
  12.             form.render("div1");              
  13.         });  

 

3.3 日期输入控件Ext.form.DateField

Ext.form.DateField是平时经常用到的日期选择控件，除了弹出日历选择日期的功能之外，还支持所有Ext.form.Field以及Ext.form.TextField中定义的功能，如下面代码所示，format表示如何保存显示选中的日期，我们可以采用任意的模式显示选中的日期，disableDays的参数值是一个数组，内部可以包括0至7的整数，它可以禁止用户选择一周内的指定日期。效果图如图2所示。

view plaincopy to clipboardprint?
  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.DateField({  
  3.                 fieldLabel:'日期',  
  4.                 emptyText:'请选择',  
  5.                 format:'Y-m-d',  
  6.                 disabledDays:[0,6]  
  7.             });  
  8.             form.render("div1");              
  9.         });  

 

2

图2 日期输入控件(禁止选择每周的周六和周日)

3.4 时间输入控件Ext.form.TimeField

Ext.form.TimeField是用来选择时间的输入控件，它可以通过制定一天中的起始时间、结束时间以及时间间隔的方式来为用户提供可供选择的时间，如下面的代码所示,我们将起始时间设置为上午10点，结束时间设置为下午14点，时间间隔为30分钟。

view plaincopy to clipboardprint?
  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.TimeField({  
  3.                 fieldLabel:'时间',  
  4.                 emptyText:'请选择',  
  5.                 minValue:'10:00 AM',  
  6.                 maxValue:'14:00 PM',  
  7.                 increment:30  
  8.             });  
  9.             form.render("div1");              
  10.         });  

 

3.5  在线编辑器Ext.form.HtmlEditor

Ext.form.HtmlEditor是一个简易的在线编辑器，能对文本进行各项设置。Ext.form.HtmlEditor的页面显示样式如图3所示。

3

图3 使用在线编辑器编辑文本样式

Ext.form.HtmlEditor的使用方法如下面的代码所示：

view plaincopy to clipboardprint?
  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.HtmlEditor({  
  3.                 fieldLabel:'在线编辑器',  
  4.                 enableAlignments:true,  
  5.                 enableColors:true,  
  6.                 enableFont:true,  
  7.                 enableFontSize:true,  
  8.                 enableFormat:true,  
  9.                 enableLinks:true,  
  10.                 enableLists:true,  
  11.                 enableSourceEdit:true  
  12.             });  
  13.             form.render("div1");              
  14.         });  

 

3.6  隐藏域Ext.form.Hidden

Ext.form.Hidden直接继承自Ext.form.Field，我们可以通过它的setValue()和getValue()函数对它执行赋值和取值操作，但它不会显示在页面上。具体代码如下：

view plaincopy to clipboardprint?
  1. var field=new Ext.form.Hidden({  
  2.     name:'hiddenId'  
  3. });  
  4. field.setValue('some thing');  
  5. var value=filed.getValue();  

 

3.7  下拉输入框Ext.form.TriggerField

Ext.form.TriggerField是ComboBox、DateField和TimeField的父类，它既可以手工录入数据，也可以通过选择录入数据，为了显示下拉选择的功能，我们需要覆写它的onTriggerClick()函数以实现弹出窗口，如下面的代码所示：

view plaincopy to clipboardprint?
  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.TriggerField({  
  3.                 fieldLabel:'选择',  
  4.                 name:'name',  
  5.                 onSelect:function(record){  
  6.                 },  
  7.                 onTriggerClick:function(){  
  8.                     if(this.menu==null){  
  9.                         this.menu=selectMenu;  
  10.                     }  
  11.                     this.menu.show(this.el,'tl-bl?');  
  12.                 }  
  13.             });  
  14.             form.render("div1");              
  15.         });  

 

四、数据校验

数据校验非常有必要，因为用户输入的数据有时候是不可靠的，EXT把验证封装到了表单的控件中，下面详细介绍如何使用它们。

4.1 输入不能为空

最基本的验证就是文本框或者其他控件中必须输入值，如下面的代码，allowBlank默认值为true，也就是说可以不输入数据，将它改成 false,文本框如果没有输入值就会出现红线。

view plaincopy to clipboardprint?
  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.TextField({  
  3.                 name:'text',  
  4.                 fieldLabel:'文本框',  
  5.                 allowBlank:false  
  6.             });  
  7.             form.render("div1");              
  8.         });  

 

4.2 最大长度和最小长度

限制输入的最大长度和最小长度是一种常见的校验方式，数据库只容许输入255个字符，当用户输入的数据超出最大长度时就会引起错误。如下面代码所示，我们设置最大长度不能超过10个字符，最小长度不能小于5个字符。效果图如图4所示。

view plaincopy to clipboardprint?
  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.TextField({  
  3.                 name:'text',  
  4.                 fieldLabel:'文本框',  
  5.                   
  6.                 maxLength:10,  
  7.                 minLenght:5  
  8.             });  
  9.             form.render("div1");              
  10.         });  

 

4

图4 最大长度校验

4.3 借助vtype

EXT提供了一套默认的校验方案，其实就是一系列输入规则和错误提示。如果使用它们，就不需要再去背那一长串正则表达式，只要记住vtype的值即可，然后配置在空间中即可，如下面代码所示,这里我们给vtype设置的是E-mail，限制text只能使用邮箱地址的格式，非常简单。

view plaincopy to clipboardprint?
  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.TextField({  
  3.                 name:'text',  
  4.                 fieldLabel:'文本框',  
  5.                 vtype:'email'  
  6.             });  
  7.             form.render("div1");              
  8.         });  

 

默认情况下，vtype一共有4种验证信息：alpha:只能输入英文字母;alphanum:只能输入字母和数字;email:电子邮箱;url:网址

4.4 自定义校验规则

其实自定义校验规则就是允许自定义正则表达式，可以编写一个regex对输入数据进行校验，这样一来，无论是何种形式的数据，都能对其进行判断，如下面代码所示，我们使用regex验证只能输入汉字的情况。

view plaincopy to clipboardprint?
  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.TextField({  
  3.                 name:'text',  
  4.                 fieldLabel:'文本框',  
  5.                 regex: /^[\u4E00-\u9FA5]+$/,  
  6.                 regexText:'只能输入汉字'  
  7.             });  
  8.             form.render("div1");              
  9.         });