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