'Extjs Layout table with colspan on a for fields

I have a simple form in extjs, I want the first field to take 2 spaces in the table layout:

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Form Panel',
    bodyStyle: 'padding:5px 5px 0',
    width: 600,
    layout: {
        type: 'table',
        columns: 3,
        tableAttrs: {
            style: {
                width: '100%'
            }
        }
    },
    fieldDefaults: {
        labelAlign: 'top'
    },

    items: [{
        colspan: 2,
        xtype: 'textfield',
        fieldLabel: 'Field 1 Take 2 spaces',
    }, {
        xtype: 'textfield',
        fieldLabel: 'Field 2',
    }, {

        xtype: 'textfield',
        fieldLabel: 'Field 3',
    }, {
        xtype: 'textfield',
        fieldLabel: 'Field 4',
    }],

});

It is not working. Have a look here: http://jsfiddle.net/Cfy8R/2/
UPADTE -1
example
enter image description here

extjs

Solution 1:^[1]

try this...

Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 600,
layout: {
    type: 'table',
    columns: 3,
    tableAttrs: {
        style: {
            width: '100%'
        }
    }
},
fieldDefaults: {
    labelAlign: 'top'
},

items: [{
    xtype: textfield,
    colspan: 2,
    inputWidth: 300 // resize the input width
}, {
    xtype: 'textfield',
    fieldLabel: 'Field 2',
}, {

    xtype: 'textfield',
    fieldLabel: 'Field 3',
}, {
    xtype: 'textfield',
    fieldLabel: 'Field 4',
}],

});

Solution 2:^[2]

You need to make two modifications, firstly on the table layout you need:

tableAttrs: {
    style: {
        width: '100%',
        tableLayout: 'fixed'
    }
}

then on the field itself you need width 100%:

{
    xtype: 'textfield',
    colspan: 2,
    width: '100%',
    inputWidth: 300 // resize the input width
}

HTH

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	MarthyM

'Extjs Layout table with colspan on a for fields

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]