1.根類 Ext.form.Basic 提供了,表單組件,欄位管理,數據驗證,表單提交,數據載入的功能 2.表單的容器 Ext.form.Panel 容器自動關聯 Ext.form.Basic 的實例對象更方便的進行欄位的配置 重要屬性 defaultType:"" 設置預設子項 的xtype 3. ...
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.') }
}
} ]
