[ExtJs5.1.0系列-第6天]Form表單 之 表單面板(Ext.form.Panel)

    對於從事Web開發的程序員來講，接觸最多的就是表單的操做。傳統的HTML表單給人一種功能單一風格樸素的印象。這個問題在ExtJs的表單上有了很大程度的改善，ExtJs對於經常使用表單功能給出了優秀的實現，不但美觀並且穩定。接下來會對ExtJs表單的主要功能及組件進行詳細的介紹。

1. 表單及表單元素

    表單在Web應用中處於很是重要的地位，咱們時刻都在使用表單收集用戶信息與用戶交互，並將收集到的有用信息提交到後臺服務端，表單是客戶端與服務端之間通訊的主要橋樑。

    ExtJs表單不但能夠實現HTML標準表單的所有功能，還提供了大量的擴展特性:

    (1)表單的異步提交

    (2)可配置的表單數據驗證

    (3)可配置的表單錯誤信息提示

    (4)對特殊數據(數組、日期、時間等)輸入組件的支持

‍2. Ext.form.Basic基本表單‍

    Ext.form.Basic是基本的表單組件，提供了字段管理、數據驗證、表單提交、數據加載等功能，它能夠做用與Ext.container.Container容器，但推薦使用Ext.form.Panel做爲表單容器。Ext.form.Panel會自動關聯到Ext.form.Basic示例，方便進行字段的配置。

3. Ext.form.Panel表單面板

    ExtJs的表單面板組件Ext.form.Panel，本質是一個標準的Ext.panel.Panel(面板)，是表單項的容器，它內置並自動建立了Ext.form.Basic基本表單組件，用來管理表單項(Ext.form.Field)，Ext.form.Panel支持Ext.form.Basic的全部配置內容。

    Ext.form.Panel默認使用anchor佈局，而且能夠方便地替換爲其餘任何標準佈局。

    Ext.form.Panel與HTML原始表單佈局表現形式不一樣，對錶單的操做及處理也不相同，這些不一樣主要表如今表單的提交方式、表單的驗證和對錶單組件的支持3個方面。

    (1)表單提交方式

        HTML原始表單(form)使用form.submit()的方式進行提交，這種提交方式是同步進行的，會致使瀏覽器頁面的跳轉，打斷用戶操做，下降用戶體驗。而Ext.form.Panel(表單面板組件)採用Ajax方式進行異步表單提交，不會致使瀏覽器頁面的跳轉，不會打斷用戶的操做，有利於改善用戶體驗。

    (2)對錶單驗證的支持

        HTML原始表單並不支持表單組件的驗證功能，在須要進行驗證的場合程序員須要編寫相應的驗證代碼，並在表單提交前進行調用以保證提交數據的正確性。而Ext.form.Panel已經支持了常見的表單驗證功能，只須要在組件上進行必要的配置就能夠實現對該組件輸入數據的驗證，而且這個驗證是不須要程序員手工調用的，在表單提交以前會自動調用驗證功能，並對出現錯誤的輸入給出相應的提示。

    (3)對錶單組件的支持

        HTML原始表單支持的表單組件和Ext.form.Panel支持的表單組件很是不一樣，Ext.form.Panel支持的表單組件所有是通過ExtJs封裝以後的組件對象，具備更多的高級功能。

    如下列出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.FieldContainer	字段容器	fieldcontainer
Ext.form.FieldSet	字段集	fieldset
Ext.form.field.Hidden	隱藏域	hiddenfield
Ext.form.field.HtmlEditor	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

    如下列出Ext.form.Panel的重要配置項及經常使用方法

配置項	類型	說明
buttons	Array	一個按鈕(Ext.button.Button)配置對象的數組，按鈕將被添加到表單頁腳當中
layout	String	表單佈局，默認爲anchor
minButtonWidth	Number	表單按鈕的最小寬度，默認爲75像素
pollForChanges	Boolean	是否循環檢查表單值得變化
pollInterval	Number	循環檢查表單值的時間間隔，默認爲500毫秒
items	Mixed	一個子元素或子元素的數組
title	String	表單標題

下面咱們將建立一個form表單容器

Ext.onReady(function() {
	var form = Ext.create('Ext.form.Panel', {
		renderTo: 'form',
		title: '表單測試',
		height: 300,
		width: 380,
		defaults: {
			labelSeparator: ':',
			labelAlign: 'right',
			allowBlank: false,
			blankText: '不容許爲空',
//			msgTarget: 'qtip' 		//顯示一個浮動的提示信息
//			msgTarget: 'title'		//顯示一個瀏覽器原始的浮動提示信息
//			msgTarget: 'side'		//在字段下方顯示一個提示信息
			msgTarget: 'under'		//在字段的右邊顯示一個提示信息
//			msgTarget: 'errorMsg'	//在指定id的元素內顯示提示信息
		},
		items: [
			{xtype: 'textfield', fieldLabel: '姓名'},
			{xtype: 'numberfield', fieldLabel: '年齡', minValue: 1}
		],
		buttons: [{text:'Submit'}, {text:'Reset'}]
	});
});

運行結果如圖: