extjs 表单设置html5,HTML Form to ExtJS Form

I have an html form in which the fields are extremely scattered. The page has been created using html table - rowspan and colspan combinations.

I need to convert this form to ExtJS and display it in a window.

After carrying out some research, I feel that table layout could be best choice for positioning the fields. But there are few issues which I have been facing as following:

If I give rowspan or colspan as 2 or more, then also the fields don't increase in size to occupy the availabe space and remain confined to single column.

If I resize the window, then the table doesn't resize (though, the form does as the tbar present at the top expand to occupy the complete space).

I have used the layout as 'fit' for window and layout as 'table' for the form.

I have also tried using 'anchor' layout for form and then having a fieldset with table layout, but the positioning didn't work.

Could someone please throw some light on this. Following is a basic code snippet I am using:

var form = Ext.create('Ext.form.Panel', {

url:'voyage_berth_monitoring.php',

fieldDefaults: {

labelAlign: 'right'

},

layout:{

type:'table',

columns:3

},

defaults:{

anchor:'100%'

},

tbar:[

{

xtype:'button',

text:'Clear'

},

{

xtype:'button',

text:'Delete'

},

{

xtype:'tbfill'

},

{

xtype:'button',

text:'Save'

},

{

xtype:'button',

text:'Exit'

}

],

items: [

{

fieldLabel:'item',

xtype:'textfield'

},

{

fieldLabel:'item',

xtype:'textfield',

colspan:2

},

{

fieldLabel:'item',

xtype:'textfield'

},

{

fieldLabel:'item',

xtype:'textfield'

},

{

fieldLabel:'item',

xtype:'textfield'

}

]

});

var win = Ext.create('Ext.window.Window', {

title: 'Window',

closable: true,

closeAction:'hide',

minimizable:true,

maximizable:true,

height:350,

width:750,

layout:'fit',

autoScroll:true,

items: form

});

win.show();