1.根類
Ext.form.Basic
提供了,表單組件,字段管理,數據驗證,表單提交,數據加載的功能
2.表單的容器
Ext.form.Panel
容器自動關聯 Ext.form.Basic 的實例對象更方便的進行字段的配置
重要屬性
defaultType:"" 設置默認子項 的xtype
3.數據交互和加載
Ext.form.action.Action
Ext.form.action.Submit ajax方式提交
Ext.form.action.StandardSubmit 原始表單提交方法
Ext.form.action.DirectLoad
Ext.form.action.DirectSubmit 指令式的模式
4.字段的控制
Ext.form.field.Base 是跟類
混入了類 [Ext.form.field.Field]得到表單值的處理功能
混入了類[Ext.form.Labelable]得到表單標簽錯誤信息提示的功能
Ext.form.field.Text 文本框方式的
Ext.form.field.Trigger 觸發器
Ext.form.field.Time 帶有時間下拉框 和自動驗證的input表單。
Ext.form.field.Date 帶有日期選擇器下拉框並會自動進行
日期驗證的日期輸入表單
Ext.form.field.Number 數值型的文本表單，對非數組值行的
按鍵進行自動過濾，並且限定一系列 有效范圍。
Ext.form.field.File 文件上傳的
Ext.form.field.ComboBox 選擇框
Ext.form.field.Checkbox 選擇框方式的
Ext.form.field.Radio 單選框
Ext.form.field.Hidden 特殊的-隱藏字段 提交表單時傳遞到后台。
Ext.form.field.HtmlEditor 特殊的-文本編輯框
5.其中夾雜布局的類
Ext.form.FieldContainer 文本域容器
Ext.form.CheckboxGroup 表單項容器。
Ext.form.RadioGroup 一個field container其中有一個專門
把Ext.form.field.Radio 控件分類按列分布的布局安排
Ext.form.Label
創建一個獨立的 <label /> 元素,此元素可以加入到 form
之中,也可以通過 forId 與該form中的表單域 field 關聯
Ext.form.Labelable
一個混合類，允許組件被配置且裝飾有標簽和錯誤消息，
作為表單字段的通用組件。
Ext.form.FieldSet
控件組,輸入域組合容器. 包裝一組輸入域的容器,
Ext.form.FieldContainer 文本域容器
Ext.form.Panel
重要的配置項
title:'', 標題頭
bodyStyle:'', 自定義到css 樣式
frame : , 以什么方式提交提畫面
height: , 高
width :, 寬
renderTo:'', 指定某個ｉｄ ，這元素將被渲染。
defaultType:'', 當前容器中創建子組件時使用的默認 xtype
defaults:{}
由於混入了Ext.form.Labelable
可以配置
labelSeparator 字段名字和值的分割符號
labelWidth 標簽寬度
重要的方法
Ext.form.field.Text 文本框(xtype: textfield)
重要的配置項
width : 150,
allowBlank: false, //不能是空
labelAlign :'left',
msgTarget:'side'//在字段的右面展示數據
重要的方法
Ext.form.field.ComboBox
控件支持自動完成、遠程加載、和許多其他特性。
Validations 內置校驗
Ext.data.validations
本單例包含一個驗證函數集合, 用以驗證任何類型的數據。通常在 Model中使 用它們, 它們是自動生成和執行的。
可以通過msgTarget改變錯誤信息的顯示位置，通過invalidText改變錯誤信息的內容，每個字段都有自己的invalidText實現方式，錯誤信息中有許多可替換的標記
例如，在Date Field的invalidText中，任何’{0}’ 都會被替換成這個字段的值，’ {1}’會被替換成這個字段的format，下面的代碼展示了如何使用這個特性自定義錯誤信息
自定義校驗：
用Text Field的regex配置應用一個校驗規則，和使用maskRe配置限制可輸入的字符，這有一個使用TextField校驗輸入時間的例子
{ fieldLabel: 'Last Login Time', name: 'loginTime', regex: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i, maskRe: /[\d\s:amp]/i, invalidText: 'Not a valid time. Must be in the format "12:34 PM".' }
Ext.form.action.Submit
這類用來處理用Form 提交數據，並可以處理應答的返回值。
這個類的實例只在Form 提交的時候創建。
buttons: [ { text: 'Submit', handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ success: function(form, action) { Ext.Msg.alert('Success', action.result.msg); }, failure: function(form, action) { Ext.Msg.alert('Failed', action.result.msg); } }); } else { Ext.Msg.alert('Invalid Data', 'Please correct form errors.') } } } ]
1.首先找到對這個類的的引用.
2. 提交之前調用了isValid方法確保每個表單字段都已經填寫正確
3.最后調用submit方法，並傳遞了兩個回調函數success和failure，在這兩個回調函數的參數中，action.result可以引用到服務器端返回JSON的解析后的對象
數據可以通過loadRecord方法直接從Model加載進入Form Panel：
Ext.ModelMgr.getModel('User').load(1, {
success: function(user) {
// 當用戶加載成功，加載數據到表單
userForm.loadRecord(user);
}
});
代替submit方法，可以使用BasicForm的updateRecord方法更新form綁定的model，然后用Model的save方法保存數據
buttons: [ { text: 'Submit', handler: function() {
var form = this.up('form').getForm(),
//獲取到這個
from record = form.getRecord();
// 得到底層的模型實例
if (form.isValid()) {
//提交前確保表單含有有效數據
form.updateRecord(record);
// 更新的記錄表單數據
record.save({
// 將記錄保存到服務器
success: function(user) {
Ext.Msg.alert('Success', 'User saved successfully.')
},
failure: function(user) {
Ext.Msg.alert('Failure', 'Failed to save user.')
} });
} else {
// 顯示錯誤警報,如果數據是無效的 Ext.Msg.alert('Invalid Data', 'Please correct form errors.') }
}
} ]
demo 下載 https://github.com/ningmengxs/Extjs.git