在這里我們一塊看一下form中幾個(gè)控件，因?yàn)閒orm控件較多這里只簡(jiǎn)單看幾個(gè)比較有代表性的。

TextField

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

Ext.QuickTips.init();//顯示提示信息 Ext.form.Field.prototype.msgTarget = 'side'; //驗(yàn)證未通過時(shí)在對(duì)應(yīng)的控件右側(cè)顯示紅色提示 var tfUserName=new Ext.form.TextField({ id:"userName", name:'userName', width:"auto", height:"auto", //renderTo:"divTextBox",//其實(shí)對(duì)于這類控件很少用renderTo，一般作為子控件 allowBlank:false, blankText:"請(qǐng)輸入信息...",//是否為空校驗(yàn)失敗時(shí)顯示的信息 emptyText:"請(qǐng)輸入您的密碼...",//為空時(shí)顯示的信息 fieldLabel:'用戶名', //hideLabel:"false", inputType:"text", maxLength:10, maxLengthText:"不好意思，最多只能輸入10個(gè)字符！",//這樣會(huì)給出紅線提示但不會(huì)顯示這些信息 minLength:6, minLengthText:"不好意思，最少需要輸入6個(gè)字符！", value:"" });

當(dāng)然，對(duì)于TextField前面已經(jīng)說過，這里主要看一下驗(yàn)證。allowBlank表示是否可以為空，否則它將會(huì)顯示blankText中的信息，但是請(qǐng)注意，這個(gè)信息的顯示是以提示信息的形式顯示的，必須加上 Ext.QuickTips.init(); 否則你是看不到錯(cuò)誤信息的，而且我們通過 Ext.form.Field.prototype.msgTarget = 'side';可以在驗(yàn)證未通過時(shí)在右側(cè)警告 。而emptyText很明顯就是為空時(shí)顯示的內(nèi)容，在后面我們還定義了輸入信息的最長(zhǎng)和最短的長(zhǎng)度限制以及對(duì)應(yīng)的提示信息。

效果如圖：

上面是為空的驗(yàn)證，其實(shí)對(duì)于常用的驗(yàn)證Ext中也已經(jīng)定義了，那就是vtype，假設(shè)我們要驗(yàn)證一個(gè)郵箱就可以在TextField中定義vtype屬性為"email"定義驗(yàn)證失敗的信息vtypeText為"郵箱格式不正確！"就可以了。

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

常用的vtype還有"alpha"（數(shù)字）、"alphanum"（數(shù)字和字母）、"url"。但是這樣的驗(yàn)證顯然還是不夠，我們知道正則表達(dá)式做驗(yàn)證是最常見的一種手法，Ext當(dāng)然也支持：

var tfUserPwd=new Ext.form.TextField({ id:"userPwd", name:'userPwd', width:"auto", height:"auto", allowBlank:false, blankText:"密碼不能為空！", emptyText:'請(qǐng)輸入用戶密碼...', fieldLabel:'用戶密碼', inputType:"password", regex:/^/d$/, regexText:"只能輸入數(shù)字！", //validator:function(){Ext.Msg.alert("系統(tǒng)提示","密碼只能為數(shù)字格式！");}, validateEvent:"keyup", invalidText:"您只能輸入數(shù)字", value:"" });

上面定義了一個(gè)很簡(jiǎn)單的正則表達(dá)是驗(yàn)證，顯示了正則表達(dá)式在Ext中的用法。但是其實(shí)我們知道即使是這樣有時(shí)還是不能夠滿足我們的要求的，這就必須應(yīng)用Ext中的自定義驗(yàn)證。自定義驗(yàn)證也很簡(jiǎn)單，只需要先使用apply方法添加自定義函數(shù)然后在控件中像Ext中已有驗(yàn)證一樣配置就可以了。假設(shè)現(xiàn)在我要選擇一個(gè)日期段，肯定結(jié)束日期不能夠小于開始日期，這樣的驗(yàn)證我們?cè)趺醋瞿兀?

Ext.apply(Ext.form.VTypes,{ DateRang:function(val,field){ cmpdt=Ext.get(field.cmpDate);//cmpDate是我們自定義屬性,指示要跟誰(shuí)比較 if(cmpdt)//是否定義cmpDate { if(val Ext.Msg.alert("系統(tǒng)警告","起始日期大于終止日期，請(qǐng)重新選擇"); 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:'結(jié)束日期', cmpDate:'startDate', //自定義屬性，指示跟誰(shuí)比較 vtype:'DateRang'//我們定義的vtype類型 //vtypeText:'其實(shí)日期不得大于終止日期！' });

我們首先添加了一個(gè)自定義函數(shù)（用Ext的apply方法）DateRange，在這個(gè)函數(shù)中我們有val、field兩個(gè)參數(shù)，其中val就是要使用這個(gè)自定義函數(shù)的的控件的value值，field就是這個(gè)空間的屬性集合。我們約定在使用這個(gè)函數(shù)的控件中定義一個(gè)cmpDate屬性用來(lái)指定要比較的日期控件，然后在函數(shù)中我們得到這個(gè)空間的值（其實(shí)也就是其實(shí)日期的值），然后和val比較，如果val小于要比較的控件的值則返回false，否則為true。使用的時(shí)候就按照預(yù)定首先定義cmpDate，然后定義vtype為我們的自定義函數(shù)就可以了（和Ext中定義的常用vtype類型無(wú)二）。下面是我選擇了08/01/2010后鼠標(biāo)指針離開后的狀態(tài)：

順便說一下，上面僅僅定義了自控件，用的時(shí)候是在FormPanel中items中添加對(duì)象名稱，由于后面的例子都是用這個(gè)fp對(duì)象作為容器，所以將代碼貼出來(lái)：

var fp=new Ext.form.FormPanel({ //注意：Ext.form.FormPanel=Ext.FormPanel title:'用戶登錄', width:300, bodyStyle:'padding:5px 5px 0', renderTo:'divFormPanel', frame:true,//在此，這個(gè)屬性就很重要了，如果不為true，你會(huì)看到下面的button和panel看起來(lái)是分開的 url:'login.aspx',//提交地址 method:'post',//提交方法 defaults:{ //在這里同一定義item中屬性，否則需要各個(gè)指明 xtype:'textfield', labelAlign:'left', labelWidth:60, width:100 }, items:[ dfStart, dfEnd ], buttonAlign:'center',//按鈕對(duì)其方式 buttons:[ { text:'確定' }, { text:'取消', handler:function(){//點(diǎn)擊取消按鈕的操作事件 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，這個(gè)一定要說明，否則你得到的就不是你想要的value值（當(dāng)然，CheckBox也是如此）。然后要說明的是它沒有沒有指定fieldLabel，如果我們指定了fieldLabel之后你會(huì)看到這樣的效果：

顯然這不是我們想要的，你肯定希望只有一個(gè)"性別"就可以了，而且兩個(gè)radio在同一行中，這才是我們通常看到的。那么我們?cè)撊绾蝸?lái)做呢？這個(gè)我們暫時(shí)先不管，后面我們會(huì)專門探討Ext布局。另外對(duì)于CheckBox和Radio是類似的，我們也不再說了。

FieldSet

這是一個(gè)容器組件，很簡(jiǎn)單，我們直接看代碼（這里用上面定義的tfUserName和tfUserPwd作為其子控件）：

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

運(yùn)行效果：

ComboBox

這個(gè)控件功能十分強(qiáng)大，很多動(dòng)態(tài)復(fù)雜的功能它都有，我們這里暫且不探討他的交互性，后面會(huì)有專門的內(nèi)容去說，這里只看一些基本用法。

var cbName = new Ext.form.ComboBox({ id:'cbName', store: ['所有人員','劍心','神谷熏','左之助','彌彥'], fieldLabel:'姓名', emptyText:'請(qǐng)選擇姓名...', triggerAction:'all', //這個(gè)屬性極其重要，如果不加這個(gè)你在選擇了一個(gè)值之后下列列表中就只剩下這個(gè)值了，其他的沒有了 editable:false, //是否可以編輯 readOnly:false //如果為true的話就不能選了 //allowBlank:false, //blankText:"姓名必須選擇", //autoSelect:true, //selectOnFocus:true //獲得焦點(diǎn)時(shí)是否選中文本 });

運(yùn)行效果：

那么我們?nèi)绾稳〉肅omboBox的值呢？其實(shí)比較簡(jiǎn)單，在上面的cbName加上listeners配置：

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

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

好，暫且到這里了！

Ext系列form控件篇