1.表单的基本布局：
可以采用各种布局让表单元素和表单搭配更整洁美观，默认的是自上而下的布局，可不写或通过layout:form实现，如果要分列布局则采用layout：column和columnWidth:百分比来实现。
???var form = new Ext.form.FormPanel({ ???????defaultType: ‘textfield‘, ???????title: ‘form‘, ???????buttonAlign: ‘center‘,//left,center,right(默认） ???????frame:true, ???????width: 220, ???????url: ‘form.jsp‘, ???????fieldDefaults: { ???????????buttonAlign: ‘right‘, ???????????labelAlign: ‘left‘,//left，top，right ???????????labelWidth: 40 ???????}, ???????items: [ ???????????{fieldLabel: ‘俩字‘}, ???????????{fieldLabel: ‘三个字‘}, ???????????{fieldLabel: ‘四个汉字‘} ???????], ???????buttons: [{ ???????????text: ‘按钮‘, ???????????handler: function() { ???????????????form.getForm().submit(); ???????????} ???????}] ???}); ???form.render("form");效果如下：
var form = new Ext.form.FormPanel({ ???????labelAlign: ‘right‘, ???????labelWidth: 60, ???????buttonAlign: ‘center‘, ???????title: ‘form‘, ???????frame:true, ???????width: 650, ???????url: ‘04_01_01.jsp‘, ???????items: [{ ???????????xtype: ‘container‘, ???????????layout:‘column‘, ???????????items: [{ ???????????????xtype: ‘container‘, ???????????????columnWidth:.33, ???????????????layout: ‘form‘, ???????????????items:[{xtype: ‘textfield‘,fieldLabel: ‘俩字‘}] ???????????},{ ???????????????xtype: ‘container‘, ???????????????columnWidth:.33, ???????????????layout: ‘form‘, ???????????????items:[{xtype: ‘textfield‘,fieldLabel: ‘三个字‘}] ???????????},{ ???????????????xtype: ‘container‘, ???????????????columnWidth:.33, ???????????????layout: ‘form‘, ???????????????items:[{xtype: ‘textfield‘,fieldLabel: ‘四个汉字‘}] ???????????}] ???????}], ???????buttons: [{ ???????????text: ‘按钮‘, ???????????handler: function() { ???????????????form.getForm().submit(); ???????????} ???????}] ???}); ???form.render("form");效果如下：
下面是一个综合运用表单默认布局和分列布局的例子：
var form = new Ext.form.FormPanel({
????labelAlign: ‘right‘,
????labelWidth: 60,
????buttonAlign: ‘center‘,
????title: ‘form‘,
????frame:true,
????width: 450,
????url: ‘04_01_01.jsp‘,
????items: [{
bodyStyle: ‘background:transparent;border:0px;‘,
????????layout:‘column‘,
????????items: [{
??bodyStyle: ‘background:transparent;border:0px;‘,
????????????columnWidth:.5,
????????????layout: ‘form‘,
????????????defaultType: ‘textfield‘,
????????????items:[
????????????????{fieldLabel: ‘俩字‘},
????????????????{fieldLabel: ‘俩字‘}
????????????]
????????},{
??bodyStyle: ‘background:transparent;border:0px;‘,
????????????columnWidth:.5,
????????????layout: ‘form‘,
????????????defaultType: ‘textfield‘,
????????????items:[
????????????????{fieldLabel: ‘三个字‘},
????????????????{fieldLabel: ‘三个字‘},
????????????????{fieldLabel: ‘三个字‘}
????????????]
????????}]
????},{
????????width: 345,
????????height: 100,
????????xtype: ‘textarea‘,
????????fieldLabel: ‘四个汉字‘
????}],
????buttons: [{
????????text: ‘按钮‘,
????????handler: function() {
????????????form.getForm().submit();
????????}
????}]
});
form.render("form");效果如下：
2.布局中利用fieldset:
在HTML中，需要把输入项放到fieldset中，以此来显示分组结构。注意我们可以在表单布局中使用fieldset，也可以在fieldset中使用布局。
在布局中使用表单：
var form = new Ext.form.FormPanel({ ???????labelAlign: ‘right‘, ???????labelWidth: 60, ???????buttonAlign: ‘center‘, ???????title: ‘form‘, ???????frame:true, ???????width: 450, ???????url: ‘form.jsp‘, ???????items: [{ ???????????bodyStyle: ‘background:transparent;border:0px;‘, ???????????layout:‘column‘, ???????????items: [{ ???????????????bodyStyle: ‘background:transparent;border:0px;‘, ???????????????columnWidth:.5, ???????????????layout: ‘form‘, ???????????????xtype: ‘fieldset‘, ???????????????title: ‘俩字‘, ???????????????autoHeight: true, ???????????????defaultType: ‘textfield‘, ???????????????items:[ ???????????????????{fieldLabel: ‘俩字‘}, ???????????????????{fieldLabel: ‘俩字‘} ???????????????] ???????????},{ ???????????????bodyStyle: ‘background:transparent;border:0px;‘, ???????????????columnWidth:.5, ???????????????layout: ‘form‘, ???????????????xtype: ‘fieldset‘, ???????????????title: ‘三个字‘, ???????????????autoHeight: true, ???????????????style: ‘margin-left: 20px;‘, ???????????????defaultType: ‘textfield‘, ???????????????items:[ ???????????????????{fieldLabel: ‘三个字‘}, ???????????????????{fieldLabel: ‘三个字‘}, ???????????????????{fieldLabel: ‘三个字‘} ???????????????] ???????????}] ???????},{ ???????????xtype: ‘fieldset‘, ???????????title: ‘四个汉字‘, ???????????autoHeight: true, ???????????items: [{ ???????????????width: 345, ???????????????height: 100, ???????????????xtype: ‘textarea‘, ???????????????fieldLabel: ‘四个汉字‘ ???????????}] ???????}], ???????buttons: [{ ???????????text: ‘按钮‘, ???????????handler: function() { ???????????????form.getForm().submit(); ???????????} ???????}] ???}); ???form.render("form");效果如下：
在fieldset中使用布局：
?set = new Ext.form.FieldSet({ ???????title:‘fieldset‘, ???????//width:400, ???????height:60, ???????columnWidth: 1, ???????layout: ‘column‘, ???????border: true, ???????anchor:‘100%‘, ???????labelWidth: 40, ???????buttonAlign: ‘center‘, ???????items:[{ ???????????bodyStyle: ‘background:transparent;border:0px;‘, ???????????columnWidth:.4, ???????????layout: ‘form‘, ???????????border:false, ???????????items: [{ ???????????????xtype:‘textfield‘, ???????????????fieldLabel: ‘id‘, ???????????????name: ‘aaa‘, ???????????????anchor: ‘95%‘ ???????????}] ???????},{ ???????????bodyStyle: ‘background:transparent;border:0px;‘, ???????????columnWidth:.4, ???????????layout: ‘form‘, ???????????border:false, ???????????items: [{ ???????????????xtype:‘textfield‘, ???????????????fieldLabel: ‘name‘, ???????????????name: ‘bbb‘, ???????????????anchor:‘95%‘ ???????????}] ???????},{ ???????????bodyStyle: ‘background:transparent;border:0px;‘, ???????????columnWidth:.2, ???????????layout: ‘form‘, ???????????border:false, ???????????items: [{ ???????????????xtype:‘button‘, ???????????????text:‘query‘, ???????????????handler: function(){ ???????????????????Ext.Msg.alert(‘sss‘,‘aaa‘); ???????????????}, ???????????????scope: this ???????????}] ???????}] ???}); ???setform = new Ext.form.FormPanel({ ???????height: 80, ???????border: false, ???????labelWidth:80, ???????labelAlign:‘right‘, ???????frame:true, ???????items:[set] ???}); ???win = new Ext.Window({ ???????title: ‘FieldSet的column布局‘, ???????layout:‘fit‘, ???????width:500, ???????height:300, ???????closeAction:‘hide‘, ???????items: [setform] ???}); ???win.show();效果如下：
3.自定义布局：
因为Ext.form.FormPanel继承自Ext.Panel，所以可以使用layout和item提供布局，除了Ext.form.Field之类的输入控件外，还可以嵌入其他panel来装饰表单，比如图片和文字
在表单中使用Ext.Panel:
{ ???????????????columnWidth:.5, ???????????????layout: ‘form‘, ???????????????xtype: ‘fieldset‘, ???????????????title: ‘三个字‘, ???????????????autoHeight: true, ???????????????style: ‘margin-left: 20px;‘, ???????????????defaultType: ‘textfield‘, ???????????????items:[ ???????????????????{fieldLabel: ‘三个字‘}, ???????????????????{fieldLabel: ‘三个字‘}, ???????????????????{fieldLabel: ‘三个字‘}, ???????????????????{xtype: ‘panel‘,html: ‘<center><img src="user_female.png" /></center>‘} ???????????????] ???????????}] ???????}Extjs4——表单布局
原文地址：http://www.cnblogs.com/chen1234/p/7536117.html