Ext2.0 的 form 不單增加了時(shí)間輸入控件、隱藏輸入控件，還修改了創(chuàng)建方法，通過 formpanel 代替了原來 form ， column 也根據(jù)新的布局定義更新了定義方式。總體來說，定義一個(gè) form 更簡(jiǎn)單便捷了。本文將通過一個(gè)實(shí)例介紹一下 2.0 的 form 的創(chuàng)建以及其大部分控件的使用方法，因水平有限，錯(cuò)漏難免，忘大家多多諒解！
我們先來看看我們將要設(shè)計(jì)的 form 的情況：
<!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter" /> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0" /> <v:f eqn="sum @0 1 0" /> <v:f eqn="sum 0 0 @1" /> <v:f eqn="prod @2 1 2" /> <v:f eqn="prod @3 21600 pixelWidth" /> <v:f eqn="prod @3 21600 pixelHeight" /> <v:f eqn="sum @0 0 1" /> <v:f eqn="prod @6 1 2" /> <v:f eqn="prod @7 21600 pixelWidth" /> <v:f eqn="sum @8 21600 0" /> <v:f eqn="prod @7 21600 pixelHeight" /> <v:f eqn="sum @10 21600 0" /> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" /> <o:lock v:ext="edit" aspectratio="t" /> </v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:414.75pt; height:292.5pt'> <v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/04/clip_image001.jpg" o:title="form-1" /> </v:shape><![endif]--><!--[if !vml]-->
|
|
呵呵， form 有點(diǎn)雜亂，不過在這個(gè) fomr 里包含了絕大部分 Ext2.0 的控件，我將會(huì)和大家一起探討一下這些控件的使用。
在創(chuàng)建一個(gè) form 之前，我們先增加以下語句：
|
Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; |
第一句的目的是為需要的元件提供提示信息功能， form 的主要提示信息就是客戶端驗(yàn)證的錯(cuò)誤信息了。
第二句的目的就是設(shè)置控件的錯(cuò)誤信息顯示位置，主要可選的位置有：
|
位置值 |
描述 |
qtip
|
當(dāng)鼠標(biāo)移動(dòng)到控件上面時(shí)顯示提示 |
|
title |
在瀏覽器的標(biāo)題顯示，但是測(cè)試結(jié)果是和 qtip 一樣的 |
|
under |
在控件的底下顯示錯(cuò)誤提示 |
|
side |
在控件右邊顯示一個(gè)錯(cuò)誤圖標(biāo)，鼠標(biāo)指向圖標(biāo)時(shí)顯示錯(cuò)誤提示 |
[element id]
|
錯(cuò)誤提示顯示在指定 id 的 HTML 元件中 |
這個(gè)大家可以根據(jù)各人喜好設(shè)置，我習(xí)慣使用“ side ”，這里有一點(diǎn)要注意的，就是注意控制控件的寬度，以防不夠?qū)挾蕊@示錯(cuò)誤圖標(biāo)，這個(gè)下面會(huì)說到。
好了，現(xiàn)在創(chuàng)建我們的 form ， 2.0 的方法就是直接創(chuàng)建一個(gè) formpanel ：
|
var simpleForm = new Ext.FormPanel({ labelAlign: 'left', title: ' 表單例子 ', buttonAlign:'right', bodyStyle:'padding:5px', width: 600, frame:true, labelWidth:80, items: [], buttons: [] }); simpleForm.render(document.body); |
在 formpanle 里，我們定義了 form 控件的標(biāo)題是在左邊的（ labelAlign: 'left' ）； form 的標(biāo)題欄顯示標(biāo)題“表單的例子”；它的按鈕位置是在右對(duì)齊的（ buttonAlign:'right' ）；邊的類型設(shè)置了內(nèi)補(bǔ)丁 5px （ bodyStyle:'padding:5px' ）；總寬度是 600px ；設(shè)置了面板的邊角是圓弧過度的（ frame:true ），我設(shè)置這個(gè)屬性主要目的不是因?yàn)檫吔?，而是因?yàn)楸尘?，如果不設(shè)置這個(gè)，背景顏色將為白色，設(shè)置了這個(gè)將會(huì)加入海藍(lán)色的背景圖，好看點(diǎn)；還設(shè)置了 form 控件的標(biāo)題寬度是 80px （ labelWidth:80 ）。還有一些其它的設(shè)置選項(xiàng)，我這里就不多說，大家可以參看 2.0 的 API 。
items 數(shù)組的設(shè)置是我們的重點(diǎn)了， form 上的所有控件都是在這里設(shè)置的。
從 form 的結(jié)構(gòu)圖中看到， form 整體上是分了兩列的（實(shí)際上不是的，呵呵）。因?yàn)橐至校砸褂? columnLayout 類。在使用 columnLayout 類之前，我們需要了解一下 CSS 中 float 屬性的作用，改屬性主要作用是設(shè)置對(duì)象是否及如何浮動(dòng)，屬性值為 none 、 left 和 right 三個(gè)。 column 設(shè)置是 left ，意思就是對(duì)象浮在左邊的。那這個(gè)有什么作用呢？其實(shí)這個(gè)和我們?cè)? word 中輸入文字，默認(rèn)文字是左對(duì)齊的，當(dāng)一行文字的寬度超過頁面的寬度時(shí)將自動(dòng)換行是一樣的。 我們通過一個(gè)例子來說明一下。
首先我們定義一個(gè) div ，背景色是黑色，寬度和高度都是 200 ：
|
<div style='background:black;width:200px;height:200px;'> </div> |
然后在里面加入 2 個(gè) div ，每個(gè)寬度和高度都是 200 ，背景色一個(gè)是紅色，一個(gè)是綠色：
|
<div style='background:black;width:200px;height:200px;'> <div style='background:red;width:50px;height:50px;'></div> <div style='background:green;width:50px;height:50px;'></div> </div> |
我們來看看效果：
<!--[if gte vml 1]><v:shape id="_x0000_i1026" type="#_x0000_t75" style='width:209.25pt;height:210.75pt'> <v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/04/clip_image003.jpg" o:title="form-2" /> </v:shape><![endif]--><!--[if !vml]-->
|
|
在沒有使用 float 之前，兩個(gè)子 div 是分別各占一行的。好，現(xiàn)在我們?cè)趦蓚€(gè)子 div 中加入“ float:left ”在看看效果：
|
<div style='background:black;width:200px;height:200px;'> <div style='background:red;width:50px;height:50px;float:left;'></div> <div style='background:green;width:50px;height:50px;float:left;'></div> </div> |
<!--[if gte vml 1]><v:shape id="_x0000_i1027" type="#_x0000_t75" style='width:212.25pt;height:207.75pt'> <v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/04/clip_image005.jpg" o:title="form-3" /> </v:shape><![endif]--><!--[if !vml]-->
|
|
兩個(gè)子 div 出現(xiàn)在同一行了。我們復(fù)制一下兩個(gè)子 div ，粘貼兩次，然后看看效果：
|
<div style='background:black;width:200px;height:200px;'> <div style='background:red;width:50px;height:50px;float:left;'></div> <div style='background:green;width:50px;height:50px;float:left;'></div> <div style='background:red;width:50px;height:50px;float:left;'></div> <div style='background:green;width:50px;height:50px;float:left;'></div> <div style='background:red;width:50px;height:50px;float:left;'></div> <div style='background:green;width:50px;height:50px;float:left;'></div> </div> |
<!--[if gte vml 1]><v:shape id="_x0000_i1028" type="#_x0000_t75" style='width:209.25pt;height:209.25pt'> <v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/04/clip_image007.jpg" o:title="form-4" /> </v:shape><![endif]--><!--[if !vml]-->
|
|
6 個(gè)子 div 有序的按左對(duì)齊方式排列在一起了，當(dāng)一行的子 div 的寬度超過了父 div 的寬度時(shí)，子 div 自動(dòng)換行到了第二行。
不知道大家是否看得明白？看不明白自己再動(dòng)手改變一下子 div 的寬度和高度，看看效果。 column 的工作方式就是這樣的。明白這個(gè)很重要，因?yàn)樵诙x checkbox 和 radio 的時(shí)候，如果想它們的選項(xiàng)在同一行，就要注意 column 的寬度，不然就無法讓他們?cè)谕恍?。不過現(xiàn)在 column 是通過百分比來定義寬度的，我們只要控制好百分比就行了。
好了，我們繼續(xù)寫 form ，因?yàn)橐玫? column ，所以我們先在 formpanel 的 itmes 加入一個(gè) column 的定義：
|
{ layout:'column', border:false, labelSeparator:' ： ', items:[] } |
代碼里定義了在這里使用的是 columnlayout （ layout:'column' ）；沒有邊（ border:false ）；標(biāo)題的分隔符號(hào)我們用中文冒號(hào)代替英文的冒號(hào)（ labelSeparator:' ： ' ）。 coulmnLayout 里的控件將定義在 items 里。
我們首先在 items 里加入一個(gè)常用輸入控件，是用來輸入姓名的：
|
{ columnWidth:.5, layout: 'form', border:false, items: [{ xtype:'textfield', fieldLabel: ' 姓名 ', name: 'name', anchor:'90%' }] } |
我們?cè)O(shè)置了該列的寬度占總寬度的 50% （ columnWidth:.5 ）；在布局里放了一個(gè) formlayout 用來放置控件（ layout: 'form' ）； formlayout 也是沒有邊的（ border:false ）。在 formlayout 里有一個(gè)類型為 textfield' （ xtype:'textfield' ）的輸入控件?？丶?biāo)題為姓名（ fieldLabel: ' 姓名 ' ），輸入框（ input ）的 name 屬性設(shè)置“ name ”（ name: 'name' ），輸入框的長(zhǎng)度為列寬減去標(biāo)題的寬度后的 90% （ anchor:'90%' ），余下的 10% 的是給顯示錯(cuò)誤信息圖標(biāo)用的。
在加入性別的 radio 控件時(shí)就要注意了，這里需要加入兩個(gè) radio ，第一 radio 是有標(biāo)題的，第二是沒有的，而且兩個(gè) radio 加起來的寬度應(yīng)該正好是余下的列寬（ 50% ）：
|
{ columnWidth:.25, layout: 'form', border:false, items: [{ style:'margin-top:5px', xtype:'radio', fieldLabel: ' 性別 ', boxLabel:' 男 ', name: 'sex', checked:true, inputValue:' 男 ', anchor:'95%' }] },{ columnWidth:.25, layout: 'form', labelWidth:0, labelSeparator:'', hideLabels:true, border:false, items: [{ style:'margin-top:5px', xtype:'radio', fieldLabel: '', boxLabel:' 女 ', name: 'sex', inputValue:' 女 ', anchor:'95%' }] } |
從代碼中可以看到，除了列寬設(shè)置為 25% 外，其它的列設(shè)置和第一控件是一樣。 Formlayout 里加入了一個(gè)類型為 radio 的控件。控件的標(biāo)題是性別，控件的選擇顯示文本是男（ boxLabel:' 男）， input 的 name 屬性值是 sex （ name: 'sex' ），該控件默認(rèn)是已選的（ checked:true ），控件的值（ value ）是男（ inputValue:' 男 ' ）， input 的寬度是 95% 。在這里我還設(shè)置一個(gè) css 屬性，頂部的外補(bǔ)丁為 5px （ style:'margin-top:5px' ），原因是為了選擇按鈕和標(biāo)題對(duì)齊，大家可以將該屬性去掉然后看看效果。
第二個(gè) raido 控件的列設(shè)置就有所不同，因?yàn)樗恍枰獦?biāo)題，所以要設(shè)置隱藏標(biāo)題（ hideLabels:true ），標(biāo)題的寬度設(shè)置為 0 （ labelWidth:0 ） , 還要設(shè)置其標(biāo)題分隔符號(hào)為空（ labelSeparator:'' ）。其余的設(shè)置和第一個(gè) radio 的設(shè)置沒有不同，只是 input 的值不同了。
我們已經(jīng)設(shè)置了 3 列， 3 列的列寬分別為 50% 、 25% 、 25% ，根據(jù) float 的原則，下一列將從第二行開始。
在第二行第一列我們要增加的是一個(gè)日期選擇控件：
|
{ columnWidth:.5, layout: 'form', border:false, items: [{ xtype:'datefield', fieldLabel: ' 出生日期 ', name: 'birthday', anchor:'90%' }] } |
日期控件的列寬也是 50% ，列的其它設(shè)置沒有變化。控件的類型為 datefield ，標(biāo)題是出生日期， input 的 name 屬性是 birthday ， intput 寬度也是設(shè)置了 90% ，出來留出空位給錯(cuò)誤信息外，還可以讓控件與上一行的姓名的寬度相同，整列看起來比較整齊。
日期控件的設(shè)置和普通文本輸入的設(shè)置一樣簡(jiǎn)單，這里就不多說了。不過要說到的是漢化的問題。在 2.0 版自帶的本地化文件 ext-lang-zh.js 中存在一些小 bug ，我們需要自己修改一下。
首先要修改的是周的顯示，原來的定義是：
|
Date.dayNames = [ " 周日 ", " 周一 ", " 周二 ", " 周三 ", " 周四 ", " 周五 ", " 周六 " ]; |
因?yàn)樵谌掌谶x擇中顯示的區(qū)域不夠?qū)?，只能顯示一個(gè)漢字，所以需要將上面定義的把“周”去掉，修改為：
|
Date.dayNames = [ " 日 ", " 一 ", " 二 ", " 三 ", " 四 ", " 五 ", " 六 " ]; |
在年份和月份選擇中的按鈕文字還是英文“ ok ”和“ cancel ”的，這里我們也需要修改一下：
|
if(Ext.DatePicker){ Ext.apply(Ext.DatePicker.prototype, { todayText : " 今天 ", minText : " 日期在最小日期之前 ", maxText : " 日期在最大日期之后 ", disabledDaysText : "", disabledDatesText : "", monthNames : Date.monthNames, dayNames : Date.dayNames, nextText : ' 下月 (Control+Right)', prevText : ' 上月 (Control+Left)', monthYearText : ' 選擇一個(gè)月 (Control+Up/Down 來改變年 )', todayTip : "{0} (Spacebar)", okText : " 確定 ",
cancelText : " 取消 ",
format : "y 年 m 月 d 日 " }); } |
上面定義中黑色字體部分就是要加入的代碼。如果不喜歡默認(rèn)格式是“ y 年 m 月 d 日”，需要修改：
|
if(Ext.form.DateField){ Ext.apply(Ext.form.DateField.prototype, { disabledDaysText : " 禁用 ", disabledDatesText : " 禁用 ", minText : " 該輸入項(xiàng)的日期必須在 {0} 之后 ", maxText : " 該輸入項(xiàng)的日期必須在 {0} 之前 ", invalidText : "{0} 是無效的日期 - 必須符合格式： {1}", format : "Y-m-d"
}); } |
修改 DatePicker 不會(huì)改變 DateField 的格式的，這個(gè)自己根據(jù)情況決定，呵呵。
我們繼續(xù)，現(xiàn)在需要加入一個(gè)學(xué)歷的下拉選擇控件。下來選擇控件最重要的一個(gè)定義就是數(shù)據(jù)的定義的，數(shù)據(jù)定義錯(cuò)誤，可能得不到我們需要的效果，也是很多朋友感覺最麻煩的地方。
|
{ columnWidth:.5, layout: 'form', border:false, items: [{ xtype:'combo', store: new Ext.data.SimpleStore( { fields: ["retrunValue", "displayText"], data: [[1,' 小學(xué) '],[2,' 初中 '],[3,' 高中 '],[4,' 中專 '],[5,' 大專 '],[6,' 大學(xué) ']] }), valueField :"retrunValue", displayField: "displayText", mode: 'local', forceSelection: true, blankText:' 請(qǐng)選擇學(xué)歷 ', emptyText:' 選擇學(xué)歷 ', hiddenName:'education', editable: false, triggerAction: 'all', allowBlank:false, fieldLabel: ' 學(xué)歷 ', name: 'education', anchor:'90%' }] } |
列的定義就不說了，沒變化。在 items 里，類型設(shè)置成 combo 了，在這里定義了一個(gè) sotre 屬性，就是選擇值存儲(chǔ)的地方，因?yàn)槭窃诳蛻舳说臄?shù)據(jù)，所以使用了一個(gè)簡(jiǎn)單存儲(chǔ)（ SimpleStore ）。在存儲(chǔ)里，我們通過一個(gè)數(shù)組定義了 retrunValue 和 displayText 兩個(gè)字段。 retrunValue 字段指定是提交給后臺(tái)的值， displayText 字段指定是在下拉中顯示的選擇值。然后我們?cè)? data 里定義了幾組數(shù)據(jù)（ data: [[1,' 小學(xué) '],[2,' 初中 '],[3,' 高中 '],[4,' 中專 '],[5,' 大專 '],[3,' 大學(xué) ']] ），我們可以看到，每組數(shù)據(jù)都是根據(jù) fiedls 的定義來組成的，數(shù)組里第一個(gè)值就是 retrunValue 的值，第二個(gè)值就是 displayText 的值，例如 [1,' 小學(xué) '] ，就表示 retrunValue 是 1 ， displayText 是小學(xué)。
下面就是很重要的一步了，設(shè)置下拉選擇框的值和顯示文本。本例中設(shè)置了下拉選擇框的提交值對(duì)象的是存儲(chǔ)中的 retrunValue 字段（ valueField :"retrunValue" ），顯示文本是存儲(chǔ)中的 displayText 字段（ displayField: "displayText" ），通過這兩個(gè)設(shè)置就可將存儲(chǔ)中的數(shù)據(jù)和下拉框?qū)?yīng)起來。
因?yàn)閿?shù)據(jù)是在本地，所以設(shè)置了模式為 local （ mode: 'local' ）。該下拉列表只允許選擇，不允許輸入（ editable: false ），而且是必須選擇一個(gè)選項(xiàng)（ forceSelection: true ）。在沒有選擇值時(shí)顯示為選擇學(xué)歷（ emptyText:' 選擇學(xué)歷 ' ）。提交 form 時(shí)，該項(xiàng)如果沒有選擇，則提示錯(cuò)誤信息“請(qǐng)選擇學(xué)歷”（ blankText:' 請(qǐng)選擇學(xué)歷 ' ）。該選項(xiàng)值不允許為空（ allowBlank:false ）。 大家要注意的是 hiddenName 和 name 屬性， name 只是改下拉的名稱，作用是可通過，而 hiddenName 才是提交到后臺(tái)的 input 的 name 。如果沒有設(shè)置 hiddenName ，在后臺(tái)是接收不到結(jié)構(gòu)的，這個(gè)大家一定要注意。
因?yàn)檫@個(gè)下拉是只能選擇的，所以一定要設(shè)置屬性 triggerAction 為 all ，不然當(dāng)你選擇了某個(gè)選項(xiàng)后，你的下拉將只會(huì)出現(xiàn)匹配選項(xiàng)值文本的選擇項(xiàng)，其它選擇項(xiàng)是不會(huì)再顯示了，這樣你就不能更改其它選項(xiàng)了。
如果要為控件設(shè)置默認(rèn)值，就設(shè)置屬性 value ， value 的值要設(shè)置為提交給后臺(tái)的值，不要設(shè)置為顯示文本。例如本例要設(shè)置大學(xué)為默認(rèn)值得，則設(shè)置 value 的值為 6 。
現(xiàn)在到第三行了，我們要?jiǎng)?chuàng)建一個(gè) checkbox 選項(xiàng)輸入：
|
{ columnWidth:.35, layout: 'form', border:false, items: [{ xtype:'checkbox', fieldLabel: ' 權(quán)限組 ', boxLabel:' 系統(tǒng)管理員 ', name: 'popedom', inputValue:'1', anchor:'95%' }] },{ columnWidth:.2, layout: 'form', labelWidth:0, labelSeparator:'', hideLabels:true, border:false, items: [{ xtype:'checkbox', fieldLabel: '', boxLabel:' 管理員 ', name: 'pepedom', inputValue:'2', anchor:'95%' }] },{ columnWidth:.2, layout: 'form', labelWidth:0, labelSeparator:'', hideLabels:true, border:false, items: [{ xtype:'checkbox', fieldLabel: '', boxLabel:' 普通用戶 ', name: 'pepedom', inputValue:'3', anchor:'95%' }] },{ columnWidth:.25, layout: 'form', labelWidth:0, labelSeparator:'', hideLabels:true, border:false, items: [{ xtype:'checkbox', fieldLabel: '', boxLabel:' 訪客 ', name: 'pepedom', inputValue:'4', anchor:'95%' }] } |
checkbox 的設(shè)置和 radio 的設(shè)置大同小異，大家注意列寬的定義就行。
第四行的兩個(gè)輸入框主要是測(cè)試通過 vtypes 屬性來驗(yàn)證輸入框的輸入的：
|
{ columnWidth:.5, layout: 'form', border:false, items: [{ xtype:'textfield', fieldLabel: ' 電子郵件 ', name: 'email', vtype:'email', allowBlank:false, anchor:'90%' }] },{ columnWidth:.5, layout: 'form', border:false, items: [{ xtype:'textfield', fieldLabel: ' 個(gè)人主頁 ', name: 'url', vtype:'url', anchor:'90%' }] }] } |
這里的定義和普通的文本輸入框沒什么區(qū)別，只是多了一個(gè) vtypes 的屬性定義。 Vtypes 里總共定義了 email 、 url 、 alpha 和 alphanum 四種類型數(shù)據(jù)格式， email 和 url 這個(gè)不用介紹了，呵呵。 alpha 是字母和下劃線的組合， alphanum 是字母、下劃線和數(shù)字的組合。
下面要加入一個(gè) tabpanel ，加入 3 個(gè) tab 頁。
|
{ xtype:'tabpanel', plain:true, activeTab: 0, height:235, defaults:{bodyStyle:'padding:10px'}, items:[] } |
要注意的是，這個(gè) tabpanel 不是在上面 coulmn 的 items 里加的，因?yàn)椴辉? column 里。我們加在 formpanel 里。把 item 類型設(shè)置為 'tabpanel' 就行了，然后將標(biāo)簽頁頭的背景設(shè)置為透明的（ plain:true ），當(dāng)前活動(dòng)的標(biāo)簽頁是第一頁（ activeTab: 0 ），高度設(shè)置為 235px （ height:235 ）， tab 頁的面板使用內(nèi)補(bǔ)丁 10px （ defaults:{bodyStyle:'padding:10px'} ）。
好了，現(xiàn)在在 tabpanel 的 items 加入標(biāo)簽頁。第一頁主要有兩個(gè)輸入控件，一個(gè)是 vtypes 類型 alphanum 的登錄輸入框和一個(gè)密碼輸入框。
|
{ title:' 登錄信息 ', layout:'form', defaults: {width: 230}, defaultType: 'textfield',
items: [{ fieldLabel: ' 登錄名 ', name: 'loginID', allowBlank:false, vtype:'alphanum', allowBlank:false },{ inputType:'password', fieldLabel: ' 密碼 ', name: 'password', allowBlank:false }] } |
在標(biāo)簽定義了，設(shè)置了標(biāo)簽標(biāo)題是登錄信息（ title:' 登錄信息 ' ），控件容器是 formlayout （ layout:'form' ），控件的默認(rèn)寬度是 230px （ defaults: {width: 230} ），默認(rèn)控件類型是 textfield （ defaultType: 'textfield' ）。
兩個(gè)控件的定義與前面的 textfield 定義沒什么區(qū)別，只是密碼輸入框需要定義 input 控件的類型為 password （ inputType:'password' ）。兩個(gè)控件都不允許為空（ allowBlank:false ）。
第二個(gè)標(biāo)簽頁里有 numberfield 、 timefield 和 textfield 三個(gè)控件：
|
{ title:' 數(shù)字時(shí)間字母 ', layout:'form', defaults: {width: 230}, defaultType: 'textfield',
items: [{ xtype:'numberfield', fieldLabel: ' 數(shù)字 ', name: 'number' },{ xtype:'timefield', fieldLabel: ' 時(shí)間 ', name: 'time' },{ fieldLabel: ' 純字母 ', name: 'char', vtype:'alpha' }] } |
Numberfield 顧名思義就是只能輸入數(shù)字的輸入控件。在該例子，沒做最大值、最小值任何限制，如果要設(shè)置最大值和最小值，分別設(shè)置 maxValue 和 minValue 兩個(gè)屬性就行了。如果要設(shè)置數(shù)字輸入長(zhǎng)度，例如身份證號(hào)碼，可以設(shè)置 maxLength 和 minLength 兩個(gè)屬性?？梢酝ㄟ^設(shè)置 maxText 、 minText 、 maxLengthText 和 minLengthText 設(shè)置各自的驗(yàn)證出錯(cuò)信息?？赏ㄟ^ allowDecimals 屬性設(shè)置是否只允許輸入整型值，默認(rèn)值是 true ，允許輸入浮點(diǎn)數(shù)。設(shè)置 allowNegative 設(shè)置是否只允許輸入正數(shù)，默認(rèn)值是 true ，允許輸入正負(fù)數(shù)。通過 decimalPrecision 屬性可設(shè)置小數(shù)點(diǎn)后的位數(shù)，默認(rèn)值是 2 位。
timefield 是新增加的時(shí)間輸入控件，起彌補(bǔ)日期輸入控件不能輸入時(shí)間的作用。它的定義也很簡(jiǎn)單，設(shè)置類型為 timefield 就行了。 timefield 默認(rèn)時(shí)間格式是 12 小時(shí)制的，我們可通過修改 format 屬性來修改其數(shù)據(jù)格式。通過設(shè)置 increment 屬性可設(shè)置下拉選擇值得時(shí)間區(qū)間，默認(rèn)值是 15 分鐘的。還可以和數(shù)字輸入控件一樣設(shè)置最大值和最小值。下拉的設(shè)置和 combobox 是一樣的。
在目前的版本中， timefield 類還沒有漢化，所以我們要在本地文件中加入 timefield 的漢化定義：
|
if(Ext.form.TimeField){ Ext.apply(Ext.form.TimeField.prototype, { format:'G:i:s', minText : " 該輸入項(xiàng)的時(shí)間必須大于或等于： {0}", maxText : " 該輸入項(xiàng)的時(shí)間必須小于或等于： {0}", invalidText : "{0} 不是有效的時(shí)間 ", }); } |
在這里，我默認(rèn)定義了時(shí)間格式是 24 小時(shí)制的，小時(shí)為個(gè)位數(shù)是不加前綴 0 。
最后一個(gè)加入的是測(cè)試純字母輸入的，和 email 等是一樣的，我就不介紹了。
在最后一個(gè) tab 頁中加入了一個(gè) textarea 輸入：
|
{ title:' 文本區(qū)域 ', layout:'fit', items: { xtype:'textarea', id:'area', fieldLabel:'' } } |
和 textfield 一樣，只要設(shè)置類型為 textarea 就可以了，唯一的區(qū)別是為了讓 textarea 和面板自適應(yīng)面板，使用了 fitlayout 作為它的容器，所以在這里我們不用設(shè)置 textarea 的寬度和高度。
最后一步就是為 form 添加按鈕了，在 formpanel 的 buttons 屬性中我們加入了一個(gè)保存按鈕和取消按鈕：
|
buttons: [{ text: ' 保存 ', handler:function(){ if(simpleForm.form.isValid()){ this.disabled=true; simpleForm.form.doAction('submit',{ url:'test.asp', method:'post', params:'', success:function(form,action){ Ext.Msg.alert(' 操作 ',action.result.data); this.disabled=false; }, failure:function(){ Ext.Msg.alert(' 操作 ',' 保存失敗！ '); this.disabled=false; } }); } } },{ text: ' 取消 ', handler:function(){simpleForm.form.reset();} }] |
在 formpanel 類中， form 屬性指向的是 formpanle 里的 basicform 對(duì)象，我們可通過 formpanle.form 來使用該 basicform 對(duì)象。在被例子，我們已經(jīng)將 formpanel 對(duì)象賦值給了 simpleForm 這個(gè)變量，所以我們可以通過 simpleForm.form 訪問面板里的 basicform 對(duì)象。
在 buttons 里定義的按鈕默認(rèn)是 Ext.Button ，所以按鈕的屬性定義可以查看 Ext.Button 的 API 。在這里兩個(gè)按鈕都沒用到其它屬性，只是設(shè)置了顯示文本（ text ）和單擊事件。
保存按鈕要做的就是先做 basicform 的客戶端驗(yàn)證（ simpleForm.form.isValid() ），驗(yàn)證通過了則設(shè)置該按鈕狀態(tài)為 disable ，防止 2 次提交。然后調(diào)用 simpleForm.form.doAction 方法提交數(shù)據(jù)。 doAction 方法的第一個(gè)參數(shù)“ submit ”的意思是表示執(zhí)行的是提交操作，提交的后臺(tái)頁面是 test.asp （ url:'test.asp' ），提交方式是 post （ method:'post' ），沒有其它提交參數(shù)（ params:'' ），提交成功后執(zhí)行 success 定義的函數(shù)，本例只是顯示一個(gè)保存成功信息。 后臺(tái)返回的數(shù)據(jù)格式是需要我們注意的，一定要 json 格式，而且必須包含“ success:true ”，不然不會(huì)執(zhí)行 success 定義的函數(shù)。 success 定義的函數(shù)返回兩個(gè)參數(shù)，第一是 form 本身，第二個(gè)是 ajax 返回的響應(yīng)結(jié)果，在 action.result 這個(gè) json 數(shù)組了保存了后臺(tái)返回的數(shù)據(jù)。例如本例后臺(tái)返回的 json 結(jié)構(gòu)是“ {success:true,data:~~~} ”，其中 data 部分我將提交的數(shù)據(jù)將字段名和數(shù)據(jù)組合成一個(gè)字符串。在 success 函數(shù)中，我通過“ Ext.Msg.alert(' 操作 ',action.result.data); ”將 data 數(shù)據(jù)顯示出來。我們還定義 failure 函數(shù)，就是網(wǎng)絡(luò)通訊存在問題的時(shí)候?qū)@示錯(cuò)誤信息。
取消按鈕就是簡(jiǎn)單的 reset 一下 form 的控件。
如果想 form 按以前的老辦法提交，可以在 formpanel 的定義中加入一下設(shè)置：
} |
第一個(gè)設(shè)置的目的是取消 formpanel 的默認(rèn)提交函數(shù)。第二就是設(shè)置新的提交方式為舊方式提交。
至此，我們已經(jīng)簡(jiǎn)單的學(xué)習(xí)一次 2.0 版中的 form 控件，希望大家能從中獲得收益。如果有什么疑問和建議，請(qǐng)聯(lián)系我。多謝！
本例子的代碼請(qǐng)單擊 這里 下載，例子在 form 目錄下。
本例子的完整代碼：
|
后臺(tái)文件的代碼 (ASP) ：
|
CSS 屬性 float 的測(cè)試文件代碼：
|
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
