在這里我們一塊看一下form中幾個控件，因為form控件較多這里只簡單看幾個比較有代表性的。

TextField

這個是最基本的form控件了，我們看一段代碼：

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為"郵箱格式不正確！"就可以了。

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當然也支持：

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中已有驗證一樣配置就可以了。假設現在我要選擇一個日期段，肯定結束日期不能夠小于開始日期，這樣的驗證我們怎么做呢？

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對象作為容器，所以將代碼貼出來：

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中：

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作為其子控件）：

var fs=new Ext.form.FieldSet({ title:'用戶信息', autoWidth:true, autoHeight:true, collapsible:true, items:[ tfUserName, tfUserPwd ] });

運行效果：

ComboBox

這個控件功能十分強大，很多動態復雜的功能它都有，我們這里暫且不探討他的交互性，后面會有專門的內容去說，這里只看一些基本用法。

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 //獲得焦點時是否選中文本 });

運行效果：

那么我們如何取得ComboBox的值呢？其實比較簡單，在上面的cbName加上listeners配置：

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

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

好，暫且到這里了！

Ext系列form控件篇