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(); } });
