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:

1. 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.
2. 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 =   E开发者_高级运维xt.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();

Basicly i had the same problem with the layout table, couldn't find any way to span my displayfields to the length of the td, and also the same issue with the 2 columns field.

The solution i prefered was to extend the table layout and give it that flexibility

Ext.define('Extended.TableLayout', {
    alias:'layout.extendedTable',
    extend: 'Ext.layout.container.Table',
    type: 'extendedTable',
    columns: 2,
    rightMargin: 20,
    tableAttrs:{
        width: '100%'
    },
    tdAttrs:{
        width:'50%'
    },
    itemCls:'x-table-cell',
    renderItems: function(items) {

        var totalWidth = this.getLayoutTargetSize().width,
            len = items.length,
            i, item, colNr;

        for (i = 0; i < len; i++) {
            item = items[i];

                colNr = this.columns;
            if ((colNr > 1) && Ext.isNumber(item.colspan)) {
                colNr = colNr - item.colspan + 1;
            }
            item.width = Math.floor(totalWidth/colNr) - this.rightMargin;
        }
        this.callParent(arguments);
    }
});

Using the extendedTable layout i get the desired look

One alternative it to serialize your HTML form data as JSON and load it into an EXT store. Once it's in a store, EXT will happily do whatever you want with it.