北風(fēng)網(wǎng)extjs 第四講.extjs最常用的表單之textfield控件第四講.extjs最常用的表單之textfield控件【課件】

1、北風(fēng)網(wǎng)工程培訓(xùn)第四講.ExtJS最常用的表單之textfield控件講師：五月虎北風(fēng)網(wǎng)版權(quán)所有)在線選課系統(tǒng)課程知識(shí)1、表單2、表單組件3、textField控件4、實(shí)例：用戶登錄界面ExtJS-表單ExtJS表單組件特性主要表現(xiàn)：1、表單的異步提交2、可配置的表單數(shù)據(jù)驗(yàn)證3、可配置的表單錯(cuò)誤提示4、對(duì)特殊數(shù)據(jù)數(shù)組、日期、時(shí)間等輸入組件的支持ExtJS-表單組件Extjs表單組件說明Ext.form.Checkbox復(fù)選框Ext.form.ComboBox下拉列表Ext.form.DateField日期選擇表Ext.form.Hidden隱藏域Ext.form.HtmlEditorHTML文本

2、編輯器Ext.form.NumberField數(shù)字輸入框Ext.form.Radio單選框Ext.form.TextArea多行文本框Ext.form.TimeField時(shí)間選擇器Ext.form.TextField單行文本框Ext.form.TriggerField觸發(fā)按鈕文本框 ExtJS-FormPanel主要配置配置項(xiàng)類型說明buttonsArray一個(gè)按鈕(Ext.Button)配置對(duì)象數(shù)組，按鈕將被添加到表單頁腳中buttonAlignString設(shè)置Buttons中按鈕的對(duì)其方式，有效值包括left、center和right,默認(rèn)值為centerfooterBoolean是否創(chuàng)建

3、表單頁腳headerBoolean是否創(chuàng)建表單標(biāo)題欄，如果設(shè)置了title屬性則會(huì)自動(dòng)創(chuàng)建標(biāo)題欄headAsTextBoolean在標(biāo)題欄中是否顯示title，默認(rèn)為trueitemsMixed一個(gè)子元素或子元素的數(shù)組labelAlignString表單表簽的對(duì)齊方式，有效值包括left,top和right,默認(rèn)為let。如果當(dāng)前表單包含子容器，并且在子容器中沒有設(shè)置該屬性，則該屬性的設(shè)置輝級(jí)聯(lián)到子容器中l(wèi)abelWidthNumber表單標(biāo)簽的寬度titleString表單標(biāo)題主要配置工程表方法名說明getForm():Ext.form.BasicForm獲取表單面板對(duì)應(yīng)的基本表單對(duì)象 lo

4、ad(Object options):void加載表單內(nèi)容，該方法是Ext.form.BaseicForm.load的代理。startMonitoring():void開始監(jiān)控表單的有效狀態(tài)stopMonitoring():void停止監(jiān)控表單的有效狀態(tài) ExtJS-FormPanel常用方法ExtJS-表單字段配置項(xiàng)類型說明nameString字段名(數(shù)據(jù)提交到后臺(tái)的名稱)idString控件的唯一標(biāo)示，默認(rèn)系統(tǒng)會(huì)主動(dòng)生成一個(gè)唯一標(biāo)示valueString字段的初始化值readOnlyBoolean設(shè)置字段是否只讀，默認(rèn)為falsevalidateOnBlurBoolean設(shè)置字段在失去焦點(diǎn)

5、時(shí)是否被驗(yàn)證，默認(rèn)為falsevalidationDelayNumber驗(yàn)證的延時(shí)時(shí)間，以毫秒為單位，默認(rèn)為250disabledBoolean設(shè)置字段是否不可用，默認(rèn)為falsefieldLabelString地段對(duì)應(yīng)得標(biāo)簽說明，默認(rèn)為空白字符串()hideLabelBoolean是否隱藏字段標(biāo)簽，默認(rèn)為falsehideModelString有效值包括visibility,offsets,displayhideParentBoolean設(shè)置為true則顯示或隱藏組件時(shí)同時(shí)隱藏組件的容器，默認(rèn)為falselabelSeparatorString字段標(biāo)簽于字段之間的分隔符，默認(rèn):,這項(xiàng)設(shè)置會(huì)覆

6、蓋Ext.form.FormPanel中對(duì)應(yīng)的配置msgTargetString設(shè)置錯(cuò)誤信息顯示的位置，有效值包括： qtip：顯示一個(gè)浮動(dòng)的提示信息 title：顯示一個(gè)瀏覽器的負(fù)擔(dān)提示信息 under：在字段下方顯示一個(gè)提示信息 side: 在字段的右邊顯示一個(gè)提示信息 自建擴(kuò)展自類，其配置項(xiàng)為：配置項(xiàng)類型說明allowBlankBoolean是否允許為空，默認(rèn)為trueblankTextString是否允許驗(yàn)證失敗后顯示提示信息emptyTextString在一個(gè)字段中默認(rèn)顯示的信息growBoolean設(shè)置字段是否根據(jù)內(nèi)容字段進(jìn)行伸展和收縮。默認(rèn)為falsegrowMaxNumber字

7、段伸展的最大寬度，默認(rèn)為800growMin Number字段收縮的最小寬度，默認(rèn)為30inputtypeString字段類型，默認(rèn)為textmaxLengthNumber字段允許輸入的最小長(zhǎng)度minLengthNumber字段允許輸入的最小長(zhǎng)度maxLengthTextString最大長(zhǎng)度驗(yàn)證失敗后顯示的提示信息minLengthTextString最小長(zhǎng)度驗(yàn)證失敗后顯示的提示信息regexString一個(gè)javascript正則表達(dá)式對(duì)象regexTextString正則表達(dá)式驗(yàn)證失敗后顯示的提示信息，默認(rèn)為空vtypeString一個(gè)驗(yàn)證類型的名字vtypeTextString一個(gè)自定義的提示信息，用來替代vtype本身的錯(cuò)誤提示信息validatorFunctio