1、Ext.form.FormPanel支持的主要表單組件
| ExtJS表單組件 | 說明 | Xtype類型 |
|---|---|---|
| Ext.form.field.CheckBox | 復選框 | checkboxfield |
| Ext.form.CheckBoxGroup | 復選框組 | checkboxgroup |
| Ext.form.field.ComboBox | 下拉列表框 | combo |
| Ext.form.field.Date | 日期選擇框 | datefield |
| Ext.form.field.Display | 文本顯示組件 | displayfield |
| Ext.form.field.FieldContainer | 字段容器 | fieldcontainer |
| Ext.form.field.FieldSet | 字段集 | fieldset |
| Ext.form.field.Hidden | 隱藏域 | hiddenfield |
| Ext.form.field.HtmlEditer | HTML文本編輯器 | htmleditor |
| Ext.form.Label | 標簽字段 | label |
| Ext.form.field.Number | 數字輸入框 | numberfield |
| Ext.form.field.Radio | 單選框 | radio |
| Ext.form.RadioGroup | 單選框組 | radiogroup |
| Ext.form.field.Spinner | 微調組件 | spinnerfield |
| Ext.form.field.TextArea | 多行文本框 | textareafield |
| Ext.form.field.Text | 單行文本框 | textfield |
| Ext.form.field.Time | 時間選擇框 | timefield |
| Ext.form.field.Trigger | 觸發器按鈕文本框 | triggerfield |
| Ext.form.field.File | 文本框上傳字段 | filefield |
2、Ext.form.Panel主要配置項目表
| 配置項 | 類型 | 說明 |
|---|---|---|
| buttons | Array | 一個按鈕（Ext.button.Button）配置對象數組，按鈕將被添加到表單頁腳中 |
| layout | String | 表單布局 |
| minButtonWidth | Number | 表單按鈕的最小寬度，默認為75px |
| pollForChanges | Boolean | 是否循環檢查表單值的變化 |
| pollInterval | Number | 循環檢查表單值的時間間隔，默認為500ms |
| items | Mixed | 一個子元素或子元素的數組 |
| title | String | 表單標題 |
3、Ext.form.FormPanel常用方法表
| 方法名 | 說明 |
|---|---|
| checkChange:void | 強制檢查每個表單字段是否發生了變化 |
| getForm():Ext.form.BasicForm | 獲取表單面板對應的基本表單對象 |
| load(Object options):void | 加載表單內容 |
| startPolling(Number interval):void | 開始循環檢查表單值是否發生了變化 參數說明： interval：循環檢查的時間，單位ms |
| stopPolling:void | 停止startPolling啟動的內置任務 |
| submit(Object options):void | 提交表單內容 |
4、Ext.form.field.Base主要配置項目表
| 配置項 | 類型 | 說明 |
|---|---|---|
| dirtyCls | String | 設置表單值被修改后的樣式 |
| fieldCls | String | 設置表單字段的樣式，默認為“x-form-field” |
| focusCls | String | 設置表單字段獲得焦點時的樣式，默認為“x-form-focus” |
| id | String | 控件的唯一標識，默認系統自動生成一個唯一標識 |
| inputId | String | 這個id將被應用於生成的input元素，默認情況下這個id自動生成，如果手工配置id則需保證這個id的唯一性 |
| invalidText | String | 設置表單值無效且並沒有提供信息時的顯示文字 |
| inputType | String | 字段類型，默認為text |
| name | String | 字段名，默認為undefined |
| readOnly | Boolean | 設置字段是否只讀，默認為false。 |
| Mixin:Ext.form.field.Field | ||
| disabled | Boolean | true則禁用組件，默認為false。禁用狀態下的組件將不被提交 |
| submitValue | Boolean | 設置表單字段非禁用狀態下是否提交表單值，默認為true |
| validateOnChange | Boolean | 設置是否在值發生變化時立刻校驗的有效性，默認為true |
| value | Mixed | 字段的初始化值 |
| Mixing:Ext.form.Labelable | ||
| activeError | String | 如果設置該值，則組件第一次被渲染時該值將被作為錯誤信息展示，默認為undefined，組件創建之后可以使用setActiveError和unsetActiveError進行修改 |
| activeErrorTpl | Ext.XTemplate | 錯誤信息模板 |
| autoFitErrors | Boolean | 設置為true則自動調節組件體范圍，以便在組件范圍內顯示“side”或“under”狀態的錯誤信息，默認為true |
| fieldLabel | String | 設置字段標簽，它將與labelSeparator一起被添加，它的位置尺寸決定於labelAlign，labelWidth和labelPad配置項，默認為undefined |
| hideEmptyLabel | Boolean | 設置為true則完全隱藏內容為空的標簽 |
| hideLabel | Boolean | 設置為true則完全隱藏表單標簽（fieldLabel和labelSeparator），默認為false |
| labelAlign | String | 設置表單標簽filedLabel的位置， 有效值：left： 標簽在字段左邊。top： 標簽在字段上面。 right：標簽在字段右邊。 |
| labelPad | Number | 設置表單標簽與表單字段值之間的空白間距，默認為5px |
| labelSeparator | String | 設置表單標簽與表單字段之間的分隔符 |
| labelStyle | String | 設置一個直接應用於標簽元素的樣式字符串，默認為undefined |
| labelWidth | Number | 設置表單標簽寬度，僅當labelAlign設置為“left”或“right”時生效，默認為100px |
| labelableRenderTpl | Array/String/Ext.Template | 表單標簽模板 |
| msgTarget | String | 設置錯誤信息提示位置， 有效值包括： qtip：顯示一個浮動的提示消息 title：顯示一個瀏覽器浮動提示消息 under：在字段下面顯示一個提示消息 side：在字段右邊顯示一個提示消息 none：不顯示提示消息 [element id]：直接將錯誤消息添加到指定元素的innerHTML屬性 |
| preventMark | Boolean | true則不顯示錯誤消息，默認為false |
5、簡單實例
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ext.form.Panel</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.QuickTips.init(); var form = new Ext.form.Panel({ title: "表單", height: 120, width: 200, frame: true, collapsible: true, renderTo: Ext.getBody(), defaults: { autoFitErrors: "false", labelSeparator: "：", labelWidth: 50, width: 150, allowBlank: false, blankText: "必填", msgTarget: "qtip" }, items: [{ xtype: "textfield", fieldLabel: "姓名" }, { xtype: "numberfield", fieldLabel: "年齡" }] }); }); </script> </head> <body style="margin: 30px"> </body> </html>
效果圖：
