关于Ext表单布局的问题

Question

我想把表单做成一个页面，再分成几块，分别放入textfield了，grid了，一起提交给服务器。请问要把表单分成几块是怎么布局的呢?

Answer 1

[code="java"] var tab2 = new Ext.FormPanel({
labelAlign: 'top',
title: 'Inner Tabs',
bodyStyle:'padding:5px',
width: 600,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

            items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false,
                value: 'Jack'
            },{
                fieldLabel: 'Last Name',
                name: 'last',
                value: 'Slocum'
            },{
                fieldLabel: 'Company',
                name: 'company',
                value: 'Ext JS'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }]
        },{
            title:'Phone Numbers',
            layout:'form',
            defaults: {width: 230},
            defaultType: 'textfield',

            items: [{
                fieldLabel: 'Home',
                name: 'home',
                value: '[phone]'
            },{
                fieldLabel: 'Business',
                name: 'business'
            },{
                fieldLabel: 'Mobile',
                name: 'mobile'
            },{
                fieldLabel: 'Fax',
                name: 'fax'
            }]
        },{
            cls:'x-plain',
            title:'Biography',
            layout:'fit',
            items: {
                xtype:'htmleditor',
                id:'bio2',
                fieldLabel:'Biography'
            }
        }]
    }],

    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});

tab2.render(document.body);[/code]

在Ext包下的examples文件夹下的index.html有官方的各种例子，可以参考一下