Hi All,

I have a table with two columns and I want to make it 50% each of the column in container. So that I used tableAttrs as follow but it only apply first column of the table. Please let me know how should I set the column width for each column.

Thanks,
Alex

tableAttrs: {
style: {
width: '50%',
borderCollapse: 'separate',
borderSpacing: '9px 0px'
}
}
Code:
    var fsCDRCriteria = {
        xtype: 'fieldset',
        title: 'Search Criteria',
        collapsible: false,
        margins: '5 5 5 5',
        bodyStyle: {
            padding: '10px 10px'
        },
        items: [{
            xtype: 'panel',
            layout: 'table',
            border: false,
            margins: '5 5 5 5',
            defaults: {
                // applied to each contained panel
                bodyStyle: 'padding:1px'
            },
            layoutConfig: {
                tableAttrs: {
                    style: {
                        width: '50%',
                        borderCollapse: 'separate',
                        borderSpacing: '9px 0px'
                    }
                },
                columns: 2
            },
            items: [
                {
                    layout: 'form',
                    border: false,
                    //width:450,
                    items: [cboEmployer]
                }, {
                    layout: 'form',
                    border: false,
                    //width: 500,
                    items: [cboStatus]
                }, {
                    layout: 'column',
                    border: false,
                    defaults: {
                        columnWidth: 0.47,
                        layout: 'form',
                        border: false,
                        labelWidth: 1, 
                        xtype: 'panel'
                    },
                    items: [
                    { items: [dtpFromDate] },
                    { items: [dtpToDate] }
                ]

                }
            ]
        }],
        buttons: [{
            id: 'btnSearchCAL', text: 'Search', formBind: true
        }],
        keys: [{
            key: [Ext.EventObject.ENTER], handler: function () {
                calGroupingStore.load();
            }
        }
            ]
    };