Ext.form.Panel表單面板各組件介紹

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>