extjs 4.1: Fix width of collapsible panels in table layout

Question

I am working on ExtJs collapsible panel in table layout. Whenever I open the page the panel comes up perfectly fine (width wise). Please check the below images

But when I collapse the panel, the width changes! See the below image:

A sample code to replicate this issue:

Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
renderTo: Ext.getBody(),
layout: {
    type: 'table',
    columns: 2
},
items: [{
    xtype: 'panel',
    title: 'panel title',
    collapsible: true,
    titleCollapse: true,
    bodyStyle: {
        background: '#D9E5F3',
        borderColor: '#99BCE8',
        borderWidth: '1px'
    },
    scrollable: true,
    autoScroll: true,
    layout: {
        pack: 'center',
        type: 'hbox'
    },
    rowspan: 1,
    colspan: 2,
    width: '100%',
    items: [{
        text: 'Save',
        xtype: 'button',
        padding: 5
    }]
}, {
    html: 'Cell C content',
    cellCls: 'highlight'
}, {
    html: 'Cell D content'
}]
});

I have also created a fiddle with the same code. JSFiddle Demo

Please help me in resolving this issue. I want the width of the panel to remain fixed whether it is collapsed or not. But I WANT to set width in the terms of percentage and not fixed absolute number.

Answer 1

To set the column width to '100%' use tableAttrs

layout: {
        type: 'table',
        columns: 2,
        tableAttrs: {
            style: {
                width: '100%'
            }
        }
    }

Also 'scrollable' and 'autoScroll' need not to be set to true since the column width will be '100%'