FormPanel

ExtJS的Form布局中

Form布局由類Ext.layout.FormLayout定義，名稱為form，是一種專門用於管理表單中輸入欄位的布局，這種布局主要用於在程式中創建表單欄位或表單元素等使用。看下面的代碼：

Ext.onReady(function(){ new Ext.Panel({renderTo:"hello",title:"容器組件",width:300,layout:"form",hideLabels:false,labelAlign:"right",height:120,defaultType: 'textfield',items:[{fieldLabel:"請輸入姓名",name:"name"},{fieldLabel:"請輸入地址",name:"address"},{fieldLabel:"請輸入電話",name:"tel"}]});}); 上面的代碼創建了一個面板，面板使用Form布局，面板中包含三個子元素，這些子元素都是文本框欄位，在父容器中還通過hideLabels、labelAlign等配置屬性來定義了是否隱藏標籤、標籤對齊方式等。　可以在容器組件中把hideLabels設定為true，這樣將不會顯示容器中欄位的標籤了.　 在實際套用中，Ext.form.FormPanel這個類默認布局使用的是Form布局，而且FormPanel還會創建與 <form> 標籤相關的組件，因此一般情況下我們直接使用FormPanel即可。上面的例子可改寫成如下的形式：

Ext.onReady(function(){ new Ext.form.FormPanel({renderTo:"hello",title:"容器組件",width:300, labelAlign:"right",height:120,defaultType: 'textfield',items:[{fieldLabel:"請輸入姓名",name:"name"},{fieldLabel:"請輸入地址",name:"address"},{fieldLabel:"請輸入電話",name:"tel"}]});});程式結果與前面使用Ext.Panel並指定form布局的一樣.

Class Ext.form.FormPanel

包:	Ext.form
所在檔案:	Form.js
Class:	FormPanel
繼承自:	Panel

標準表單容器。 雖然沒有被列舉出來，但是該類也支持所有其內部Ext.form.BasicForm的必須配置項。

BasicForm被配置為使用FormPanel的 initialConfig 的配置項--- 這是被傳遞給構造函式的配置對象。這意味著，如果你繼承FormPanel類，並且你希望配置BasicForm，你必須為BasicForm插入配置項到它的initialConfig屬性。將BasicForm的配置項套用到this，將不會對BasicForm的配置產生影響。

FormPanel內部使用Ext.layout.FormLayout，該配置是必須的，它讓輸入欄和標籤能正確地與FormPanel的布局協同工作。如果需要在FromPanel內部使用傳統的布局，你需要套入一個傳統的Panel或者其它可以提供附加布局功能的容器。 你不可以覆蓋FormPanel的布局。

默認情況下，Ext表單通過Ajax請求提交數據，使用using Ext.form.Action。如需使用普通的瀏覽器提交方式提交包含在此FormPanel中的表單，請覆蓋此Form的onSubmit事件和submit方法：

var myForm = new Ext.form.FormPanel({ onSubmit: Ext.emptyFn, submit: function() { this.getForm().getEl().dom.submit(); } });