Ext2.0 使用實(shí)例.doc

Ext2.0 form使用實(shí)例Ext2.0的form不單增加了時(shí)間輸入控件、隱藏輸入控件，還修改了創(chuàng)建方法，通過(guò)formpanel代替了原來(lái)form，column也根據(jù)新的布局定義更新了定義方式?？傮w來(lái)說(shuō)，定義一個(gè)form更簡(jiǎn)單便捷了。本文將通過(guò)一個(gè)實(shí)例介紹一下2.0的form的創(chuàng)建以及其大部分控件的使用方法，因水平有限，錯(cuò)漏難免，忘大家多多諒解！我們先來(lái)看看我們將要設(shè)計(jì)的form的情況： 呵呵，form有點(diǎn)雜亂，不過(guò)在這個(gè)fomr里包含了絕大部分Ext2.0的控件，我將會(huì)和大家一起探討一下這些控件的使用。在創(chuàng)建一個(gè)form之前，我們先增加以下語(yǔ)句： Ext.QuickTips.init(); Ext.form.Ftotype.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ì)說(shuō)到。好了，現(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è)置了面板的邊角是圓弧過(guò)度的（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)，我這里就不多說(shuō)，大家可以參看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è)趙ord中輸入文字，默認(rèn)文字是左對(duì)齊的，當(dāng)一行文字的寬度超過(guò)頁(yè)面的寬度時(shí)將自動(dòng)換行是一樣的。 我們通過(guò)一個(gè)例子來(lái)說(shuō)明一下。首先我們定義一個(gè)div，背景色是黑色，寬度和高度都是200： 然后在里面加入2個(gè)div，每個(gè)寬度和高度都是200，背景色一個(gè)是紅色，一個(gè)是綠色： 我們來(lái)看看效果： 在沒(méi)有使用float之前，兩個(gè)子div是分別各占一行的。好，現(xiàn)在我們?cè)趦蓚€(gè)子div中加入“float:left”在看看效果： 兩個(gè)子div出現(xiàn)在同一行了。我們復(fù)制一下兩個(gè)子div，粘貼兩次，然后看看效果： 6個(gè)子div有序的按左對(duì)齊方式排列在一起了，當(dāng)一行的子div的寬度超過(guò)了父div的寬度時(shí)，子div自動(dòng)換行到了第二行。不知道大家是否看得明白？看不明白自己再動(dòng)手改變一下子div的寬度和高度，看看效果。column的工作方式就是這樣的。明白這個(gè)很重要，因?yàn)樵诙xcheckbox和radio的時(shí)候，如果想它們的選項(xiàng)在同一行，就要注意column的寬度，不然就無(wú)法讓他們?cè)谕恍小２贿^(guò)現(xiàn)在column是通過(guò)百分比來(lái)定義寬度的，我們只要控制好百分比就行了。好了，我們繼續(xù)寫(xiě)form，因?yàn)橐玫絚olumn，所以我們先在formpanel的itmes加入一個(gè)column的定義： layout:column, border:false, labelSeparator:：, items:代碼里定義了在這里使用的是columnlayout（layout:column）；沒(méi)有邊（border:false）；標(biāo)題的分隔符號(hào)我們用中文冒號(hào)代替英文的冒號(hào)（labelSeparator:：）。coulmnLayout里的控件將定義在items里。我們首先在items里加入一個(gè)常用輸入控件，是用來(lái)輸入姓名的： columnWidth:.5, layout: form, border:false, items: xtype:textfield, fieldLabel: 姓名, name: name, anchor:90% 我們?cè)O(shè)置了該列的寬度占總寬度的50%（columnWidth:.5）；在布局里放了一個(gè)formlayout用來(lái)放置控件（layout: form）；formlayout也是沒(méi)有邊的（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)題的，第二是沒(méi)有的，而且兩個(gè)radio加起來(lái)的寬度應(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è)置沒(méi)有不同，只是input的值不同了。我們已經(jīng)設(shè)置了3列，3列的列寬分別為50%、25%、25%，根據(jù)float的原則，下一列將從第二行開(kāi)始。在第二行第一列我們要增加的是一個(gè)日期選擇控件： columnWidth:.5, layout: form, border:false, items: xtype:datefield, fieldLabel: 出生日期, name: birthday, anchor:90% 日期控件的列寬也是50%，列的其它設(shè)置沒(méi)有變化?？丶念愋蜑閐atefield，標(biāo)題是出生日期，input的name屬性是birthday，intput寬度也是設(shè)置了90%，出來(lái)留出空位給錯(cuò)誤信息外，還可以讓控件與上一行的姓名的寬度相同，整列看起來(lái)比較整齊。日期控件的設(shè)置和普通文本輸入的設(shè)置一樣簡(jiǎn)單，這里就不多說(shuō)了。不過(guò)要說(shuō)到的是漢化的問(wèn)題。在2.0版自帶的本地化文件ext-lang-zh.js中存在一些小bug，我們需要自己修改一下。首先要修改的是周的顯示，原來(lái)的定義是：Date.dayNames = 周日, 周一, 周二, 周三, 周四, 周五, 周六;因?yàn)樵谌掌谶x擇中顯示的區(qū)域不夠?qū)?，只能顯示一個(gè)漢字，所以需要將上面定義的把“周”去掉，修改為：Date.dayNames = 日, 一, 二, 三, 四, 五, 六;在年份和月份選擇中的按鈕文字還是英文“ok”和“cancel”的，這里我們也需要修改一下：if(Ext.DatePicker) Ext.apply(Ext.DatePtotype, todayText : 今天, minText : 日期在最小日期之前, maxText : 日期在最大日期之后, disabledDaysText : , disabledDatesText : , monthNames : Date.monthNames, dayNames : Date.dayNames, nextText : 下月 (Control+Right), prevText : 上月 (Control+Left), monthYearText : 選擇一個(gè)月 (Control+Up/Down 來(lái)改變年), todayTip : 0 (Spacebar), okText : 確定, cancelText : 取消, format : y年m月d日 );上面定義中黑色字體部分就是要加入的代碼。如果不喜歡默認(rèn)格式是“y年m月d日”，需要修改：if(Ext.form.DateField) Ext.apply(Ext.form.DateFtotype, disabledDaysText : 禁用, disabledDatesText : 禁用, minText : 該輸入項(xiàng)的日期必須在 0 之后, maxText : 該輸入項(xiàng)的日期必須在 0 之前, invalidText : 0 是無(wú)效的日期 - 必須符合格式： 1, format : Y-m-d );修改DatePicker不會(huì)改變DateField的格式的，這個(gè)自己根據(jù)情況決定，呵呵。我們繼續(xù)，現(xiàn)在需要加入一個(gè)學(xué)歷的下拉選擇控件。下來(lái)選擇控件最重要的一個(gè)定義就是數(shù)據(jù)的定義的，數(shù)據(jù)定義錯(cuò)誤，可能得不到我們需要的效果，也是很多朋友感覺(jué)最麻煩的地方。 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% 列的定義就不說(shuō)了，沒(méi)變化。在items里，類型設(shè)置成combo了，在這里定義了一個(gè)sotre屬性，就是選擇值存儲(chǔ)的地方，因?yàn)槭窃诳蛻舳说臄?shù)據(jù)，所以使用了一個(gè)簡(jiǎn)單存儲(chǔ)（SimpleStore）。在存儲(chǔ)里，我們通過(guò)一個(gè)數(shù)組定義了retrunValue和displayText兩個(gè)字段。retrunValue字段指定是提交給后臺(tái)的值，displayText字段指定是在下拉中顯示的選擇值。然后我們?cè)赿ata里定義了幾組數(shù)據(jù)（data: 1,小學(xué),2,初中,3,高中,4,中專,5,大專,3,大學(xué)），我們可以看到，每組數(shù)據(jù)都是根據(jù)fiedls的定義來(lái)組成的，數(shù)組里第一個(gè)值就是retrunValue的值，第二個(gè)值就是displayText的值，例如1,小學(xué)，就表示retrunValue是1，displayText是小學(xué)。下面就是很重要的一步了，設(shè)置下拉選擇框的值和顯示文本。本例中設(shè)置了下拉選擇框的提交值對(duì)象的是存儲(chǔ)中的retrunValue字段（valueField :retrunValue），顯示文本是存儲(chǔ)中的displayText字段（displayField: displayText），通過(guò)這兩個(gè)設(shè)置就可將存儲(chǔ)中的數(shù)據(jù)和下拉框?qū)?yīng)起來(lái)。因?yàn)閿?shù)據(jù)是在本地，所以設(shè)置了模式為local（mode: local）。該下拉列表只允許選擇，不允許輸入（editable: false），而且是必須選擇一個(gè)選項(xiàng)（forceSelection: true）。在沒(méi)有選擇值時(shí)顯示為選擇學(xué)歷（emptyText:選擇學(xué)歷）。提交form時(shí)，該項(xiàng)如果沒(méi)有選擇，則提示錯(cuò)誤信息“請(qǐng)選擇學(xué)歷”（blankText:請(qǐng)選擇學(xué)歷）。該選項(xiàng)值不允許為空（allowBlank:false）。大家要注意的是hiddenName和name屬性，name只是改下拉的名稱，作用是可通過(guò)，而hiddenName才是提交到后臺(tái)的input的name。如果沒(méi)有設(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?，F(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è)試通過(guò)vtypes屬性來(lái)驗(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è)人主頁(yè), name: url, vtype:url, anchor:90% 這里的定義和普通的文本輸入框沒(méi)什么區(qū)別，只是多了一個(gè)vtypes的屬性定義。Vtypes里總共定義了email、url、alpha和alphanum四種類型數(shù)據(jù)格式，email和url這個(gè)不用介紹了，呵呵。alpha是字母和下劃線的組合，alphanum是字母、下劃線和數(shù)字的組合。下面要加入一個(gè)tabpanel，加入3個(gè)tab頁(yè)。 xtype:tabpanel, plain:true, activeTab: 0, height:235, defaults:bodyStyle:padding:10px, items:要注意的是，這個(gè)tabpanel不是在上面coulmn的items里加的，因?yàn)椴辉赾olumn里。我們加在formpanel里。把item類型設(shè)置為tabpanel就行了，然后將標(biāo)簽頁(yè)頭的背景設(shè)置為透明的（plain:true），當(dāng)前活動(dòng)的標(biāo)簽頁(yè)是第一頁(yè)（activeTab: 0），高度設(shè)置為235px（height:235），tab頁(yè)的面板使用內(nèi)補(bǔ)丁10px（defaults:bodyStyle:padding:10px）。好了，現(xiàn)在在tabpanel的items加入標(biāo)簽頁(yè)。第一頁(yè)主要有兩個(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定義沒(méi)什么區(qū)別，只是密碼輸入框需要定義input控件的類型為password（inputType:password）。兩個(gè)控件都不允許為空（allowBlank:false）。第二個(gè)標(biāo)簽頁(yè)里有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ù)字的輸入控件。在該例子，沒(méi)做最大值、最小值任何限制，如果要設(shè)置最大值和最小值，分別設(shè)置maxValue和minValue兩個(gè)屬性就行了。如果要設(shè)置數(shù)字輸入長(zhǎng)度，例如身份證號(hào)碼，可以設(shè)置maxLength和minLength兩個(gè)屬性。可以通過(guò)設(shè)置maxText、minText、maxLengthText和minLengthText設(shè)置各自的驗(yàn)證出錯(cuò)信息?？赏ㄟ^(guò)allowDecimals屬性設(shè)置是否只允