ExtJS的使用方法匯總(2)——表單與輸入控制項

文章目錄

• 一、建立一個簡單的表單
• 二、FormPanel和BasicForm詳解
• 三、EXT支援的控制項
• 四、資料校正

上篇文章《ExtJS的使用方法匯總(1)——配置和表格控制項使用》

地址為：http://blog.csdn.net/rocket5725/archive/2009/09/09/4535323.aspx

寫了ExtJS的配置以及表格控制項的使用方法，相信大家在學習的過程中已經基本知道了如果搭建ExtJS開發環境以及使用ExtJS的準系統。

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

一、建立一個簡單的表單

1、具體配置資訊參考上篇文章

2、建立簡單表單的實現代碼如下所示：

<mce:script type="text/javascript"><!--<br /> Ext.onReady(function(){<br /> var form=new Ext.form.FormPanel({<br /> defaultType:'textfield',<br /> labelAlign:'right',<br /> title:'form',<br /> labelWidth:50,<br /> frame:true,<br /> width:220,<br /> items:[{<br /> fieldLabel:'文字框'<br /> }],<br /> buttons:[{<br /> text:'按鈕'<br /> }]<br /> });<br /> form.render("div1");<br /> });</p><p>// --></mce:script>

3、注意HTML中無需定義太多東西，只需要定義個div id='div1'就可以實現，初始配置顯然變得更緊湊，利用items和buttons指定包含的控制項和按鈕。具體實現效果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，這是一個專門用來輸入文本資料的輸入控制項，最常用的功能就是可以檢測內部輸入的資料是否為空白，還可以控制輸入資料的內容以及最大最小長度，如下面的代碼所示：

Ext.onReady(function(){<br /> var form=new Ext.form.TextField({<br /> fieldLabel:'輸入',<br /> allowBlank:false,<br /> emptyText:'請輸入…',<br /> maxLenght:50,<br /> minLength:10<br /> });<br /> form.render("div1");<br /> });

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

Ext.form.TextArea也是用來輸入文本的輸入控制項，與Ext.form.TextField不同之處在於它可以輸入多行文本，除此以外，兩者的用法都是相同的。如下面代碼所示,preventScrollbars是用於防止出現捲軸的。

Ext.onReady(function(){<br /> var form=new Ext.form.TextArea({<br /> width:200,<br /> grow:true,<br /> preventScrollbars:true,<br /> fieldLabel:'empty',<br /> allowBank:false,<br /> emptyText:'空',<br /> maxLength:50,<br /> minLength:10<br /> });<br /> form.render("div1");<br /> });

3.3 日期輸入控制項Ext.form.DateField

Ext.form.DateField是平時經常用到的日期選擇控制項，除了彈出日曆選擇日期的功能之外，還支援所有Ext.form.Field以及Ext.form.TextField中定義的功能，如下面代碼所示，format表示如何儲存顯示選中的日期，我們可以採用任意的模式顯示選中的日期，disableDays的參數值是一個數組，內部可以包括0至7的整數，它可以禁止使用者選擇一周內的指定日期。2所示。

Ext.onReady(function(){<br /> var form=new Ext.form.DateField({<br /> fieldLabel:'日期',<br /> emptyText:'請選擇',<br /> format:'Y-m-d',<br /> disabledDays:[0,6]<br /> });<br /> form.render("div1");<br /> });

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

3.4 時間輸入控制項Ext.form.TimeField

Ext.form.TimeField是用來選擇時間的輸入控制項，它可以通過制定一天中的起始時間、結束時間以及時間間隔的方式來為使用者提供可供選擇的時間，如下面的代碼所示,我們將起始時間設定為上午10點，結束時間設定為下午14點，時間間隔為30分鐘。

Ext.onReady(function(){<br /> var form=new Ext.form.TimeField({<br /> fieldLabel:'時間',<br /> emptyText:'請選擇',<br /> minValue:'10:00 AM',<br /> maxValue:'14:00 PM',<br /> increment:30<br /> });<br /> form.render("div1");<br /> });

3.5  線上編輯器Ext.form.HtmlEditor

Ext.form.HtmlEditor是一個簡易的線上編輯器，能對文本進行各項設定。Ext.form.HtmlEditor的頁面顯示樣式3所示。

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

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

Ext.onReady(function(){<br /> var form=new Ext.form.HtmlEditor({<br /> fieldLabel:'線上編輯器',<br /> enableAlignments:true,<br /> enableColors:true,<br /> enableFont:true,<br /> enableFontSize:true,<br /> enableFormat:true,<br /> enableLinks:true,<br /> enableLists:true,<br /> enableSourceEdit:true<br /> });<br /> form.render("div1");<br /> });

3.6  隱藏欄位Ext.form.Hidden

Ext.form.Hidden直接繼承自Ext.form.Field，我們可以通過它的setValue()和getValue()函數對它執行賦值和取值操作，但它不會顯示在頁面上。具體代碼如下：

var field=new Ext.form.Hidden({<br /> name:'hiddenId'<br />});<br />field.setValue('some thing');<br />var value=filed.getValue();

3.7  下拉輸入框Ext.form.TriggerField

Ext.form.TriggerField是ComboBox、DateField和TimeField的父類，它既可以手工錄入資料，也可以通過選擇錄入資料，為了顯示下拉選擇的功能，我們需要覆寫它的onTriggerClick()函數以實現快顯視窗，如下面的代碼所示：

Ext.onReady(function(){<br /> var form=new Ext.form.TriggerField({<br /> fieldLabel:'選擇',<br /> name:'name',<br /> onSelect:function(record){<br /> },<br /> onTriggerClick:function(){<br /> if(this.menu==null){<br /> this.menu=selectMenu;<br /> }<br /> this.menu.show(this.el,'tl-bl?');<br /> }<br /> });<br /> form.render("div1");<br /> });

 

四、資料校正

資料校正非常有必要，因為使用者輸入的資料有時候是不可靠的，EXT把驗證封裝到了表單的控制項中，下面詳細介紹如何使用它們。

4.1 輸入不可為空

最基本的驗證就是文字框或者其他控制項中必須輸入值，如下面的代碼，allowBlank預設值為true，也就是說可以不輸入資料，將它改成false,文字框如果沒有輸入值就會出現紅線。

Ext.onReady(function(){<br /> var form=new Ext.form.TextField({<br /> name:'text',<br /> fieldLabel:'文字框',<br /> allowBlank:false<br /> });<br /> form.render("div1");<br /> });

4.2 最大長度和最小長度

限制輸入的最大長度和最小長度是一種常見的校正方式，資料庫只容許輸入255個字元，當使用者輸入的資料超出最大長度時就會引起錯誤。如下面代碼所示，我們設定最大長度不能超過10個字元，最小長度不能小於5個字元。4所示。

Ext.onReady(function(){<br /> var form=new Ext.form.TextField({<br /> name:'text',<br /> fieldLabel:'文字框',</p><p> maxLength:10,<br /> minLenght:5<br /> });<br /> form.render("div1");<br /> });

圖4 最大長度校正

4.3 藉助vtype

EXT提供了一套預設的校正方案，其實就是一系列輸入規則和錯誤提示。如果使用它們，就不需要再去背那一長串Regex，只要記住vtype的值即可，然後配置在空間中即可，如下面代碼所示,這裡我們給vtype設定的是E-mail，限制text只能使用郵箱地址的格式，非常簡單。

Ext.onReady(function(){<br /> var form=new Ext.form.TextField({<br /> name:'text',<br /> fieldLabel:'文字框',<br /> vtype:'email'<br /> });<br /> form.render("div1");<br /> });

預設情況下，vtype一共有4種驗證資訊：alpha:只能輸入英文字母;alphanum:只能輸入字母和數字;email:電子郵箱;url:網址

4.4 自訂校正規則

其實自訂校正規則就是允許自訂Regex，可以編寫一個regex對輸入資料進行校正，這樣一來，無論是何種形式的資料，都能對其進行判斷，如下面代碼所示，我們使用regex驗證只能輸入漢字的情況。

Ext.onReady(function(){<br /> var form=new Ext.form.TextField({<br /> name:'text',<br /> fieldLabel:'文字框',<br /> regex: /^[/u4E00-/u9FA5]+$/,<br /> regexText:'只能輸入漢字'<br /> });<br /> form.render("div1");<br /> });