表單在EXT中非常受歡迎，初看這些輸入控件，好像只是修改了CSS樣式而已，但是如果用Firebug查看一下DOM，似乎確實(shí)只有CSS發(fā)生了變化，隱藏在漂亮界面下的依然是原來的input控件，如果你想使用EXT提供的一些絢麗的功能，建議嘗試EXT的表單(Form)和對(duì)應(yīng)的輸入控件。本文就是簡(jiǎn)單介紹表單與輸入控件的使用方法。

一、創(chuàng)建一個(gè)簡(jiǎn)單的表單

1、具體配置信息參考上篇文章

2、創(chuàng)建簡(jiǎn)單表單的實(shí)現(xiàn)代碼如下所示：

  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中無需定義太多東西，只需要定義個(gè)div id='div1'就可以實(shí)現(xiàn)，初始配置顯然變得更緊湊，利用items和buttons指定包含的控件和按鈕。具體實(shí)現(xiàn)效果如圖1所示。

1

圖1 簡(jiǎn)單的表單

二、FormPanel和BasicForm詳解

如上面的實(shí)例所示，我們需要定義一個(gè)Ext.form.FormPanel,然后在里面設(shè)置field,引入Ext.form.FormPanel 的最大好處就是利于布局，Ext.form.FormPanel繼承了Ext.Panel,作為一個(gè)Panel,我們可以把 Ext.form.FormPanel放到Ext.Viewport中作為整個(gè)頁面布局的一部分，同時(shí)也可以利用items指定 Ext.form.FormPanel內(nèi)部的子組件。如其他的Panel一樣，我們可以通過xtype來指定每個(gè)子組件的類型，而不必手工創(chuàng)建它們。

三、EXT支持的控件

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

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

直接繼承Ext.form.Field，這是一個(gè)專門用來輸入文本數(shù)據(jù)的輸入控件，最常用的功能就是可以檢測(cè)內(nèi)部輸入的數(shù)據(jù)是否為空，還可以控制輸入數(shù)據(jù)的內(nèi)容以及最大最小長(zhǎng)度，如下面的代碼所示：

  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.TextField({  
  3.                 fieldLabel:'輸入',  
  4.                 allowBlank:false,  
  5.                 emptyText:'請(qǐng)輸入…',  
  6.                 maxLenght:50,  
  7.                 minLength:10  
  8.             });  
  9.             form.render("div1");              
  10.         });  

 

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

Ext.form.TextArea也是用來輸入文本的輸入控件，與Ext.form.TextField不同之處在于它可以輸入多行文本，除此以外，兩者的用法都是相同的。如下面代碼所示,preventScrollbars是用于防止出現(xiàn)滾動(dòng)條的。

  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是平時(shí)經(jīng)常用到的日期選擇控件，除了彈出日歷選擇日期的功能之外，還支持所有Ext.form.Field以及Ext.form.TextField中定義的功能，如下面代碼所示，format表示如何保存顯示選中的日期，我們可以采用任意的模式顯示選中的日期，disableDays的參數(shù)值是一個(gè)數(shù)組，內(nèi)部可以包括0至7的整數(shù)，它可以禁止用戶選擇一周內(nèi)的指定日期。效果圖如圖2所示。

  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.DateField({  
  3.                 fieldLabel:'日期',  
  4.                 emptyText:'請(qǐng)選擇',  
  5.                 format:'Y-m-d',  
  6.                 disabledDays:[0,6]  
  7.             });  
  8.             form.render("div1");              
  9.         });  

 

2

圖2 日期輸入控件(禁止選擇每周的周六和周日)

3.4 時(shí)間輸入控件Ext.form.TimeField

Ext.form.TimeField是用來選擇時(shí)間的輸入控件，它可以通過制定一天中的起始時(shí)間、結(jié)束時(shí)間以及時(shí)間間隔的方式來為用戶提供可供選擇的時(shí)間，如下面的代碼所示,我們將起始時(shí)間設(shè)置為上午10點(diǎn)，結(jié)束時(shí)間設(shè)置為下午14點(diǎn)，時(shí)間間隔為30分鐘。

  1. Ext.onReady(function(){  
  2.             var form=new Ext.form.TimeField({  
  3.                 fieldLabel:'時(shí)間',  
  4.                 emptyText:'請(qǐng)選擇',  
  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是一個(gè)簡(jiǎn)易的在線編輯器，能對(duì)文本進(jìn)行各項(xiàng)設(shè)置。Ext.form.HtmlEditor的頁面顯示樣式如圖3所示。

3

圖3 使用在線編輯器編輯文本樣式

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

  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()函數(shù)對(duì)它執(zhí)行賦值和取值操作，但它不會(huì)顯示在頁面上。具體代碼如下：

  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的父類，它既可以手工錄入數(shù)據(jù)，也可以通過選擇錄入數(shù)據(jù)，為了顯示下拉選擇的功能，我們需要覆寫它的onTriggerClick()函數(shù)以實(shí)現(xiàn)彈出窗口，如下面的代碼所示：

  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.         });  

 

四、數(shù)據(jù)校驗(yàn)

數(shù)據(jù)校驗(yàn)非常有必要，因?yàn)橛脩糨斎氲臄?shù)據(jù)有時(shí)候是不可靠的，EXT把驗(yàn)證封裝到了表單的控件中，下面詳細(xì)介紹如何使用它們。

4.1 輸入不能為空

最基本的驗(yàn)證就是文本框或者其他控件中必須輸入值，如下面的代碼，allowBlank默認(rèn)值為true，也就是說可以不輸入數(shù)據(jù)，將它改成 false,文本框如果沒有輸入值就會(huì)出現(xiàn)紅線。

  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 最大長(zhǎng)度和最小長(zhǎng)度

限制輸入的最大長(zhǎng)度和最小長(zhǎng)度是一種常見的校驗(yàn)方式，數(shù)據(jù)庫只容許輸入255個(gè)字符，當(dāng)用戶輸入的數(shù)據(jù)超出最大長(zhǎng)度時(shí)就會(huì)引起錯(cuò)誤。如下面代碼所示，我們?cè)O(shè)置最大長(zhǎng)度不能超過10個(gè)字符，最小長(zhǎng)度不能小于5個(gè)字符。效果圖如圖4所示。

  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 最大長(zhǎng)度校驗(yàn)

4.3 借助vtype

EXT提供了一套默認(rèn)的校驗(yàn)方案，其實(shí)就是一系列輸入規(guī)則和錯(cuò)誤提示。如果使用它們，就不需要再去背那一長(zhǎng)串正則表達(dá)式，只要記住vtype的值即可，然后配置在空間中即可，如下面代碼所示,這里我們給vtype設(shè)置的是E-mail，限制text只能使用郵箱地址的格式，非常簡(jiǎn)單。

  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.         });  

 

默認(rèn)情況下，vtype一共有4種驗(yàn)證信息：alpha:只能輸入英文字母;alphanum:只能輸入字母和數(shù)字;email:電子郵箱;url:網(wǎng)址

4.4 自定義校驗(yàn)規(guī)則

其實(shí)自定義校驗(yàn)規(guī)則就是允許自定義正則表達(dá)式，可以編寫一個(gè)regex對(duì)輸入數(shù)據(jù)進(jìn)行校驗(yàn)，這樣一來，無論是何種形式的數(shù)據(jù)，都能對(duì)其進(jìn)行判斷，如下面代碼所示，我們使用regex驗(yàn)證只能輸入漢字的情況。

  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.         });