Collapsible panel width problem

HTML

<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

Ext.create('Ext.panel.Panel', {
    title: 'Car Simple Tree',
    height: 500, //Fixed height for this panel
    renderTo: Ext.getBody(),
    layout: {
        type: 'table',
        columns: 2,
        tableAttrs: {
            style: {
            'table-layout': 'fixed',
                width: '100%' // To make the cell width 100% 
            }
        }
    },
    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: 1,
        width: '100%',
        items: [{
            text: 'Save',
            xtype: 'button',
            padding: 5
        }]
    }, {
        html: 'Cell A content',
        cellCls: 'highlight'
    }, {
        html: 'Cell C content',
        cellCls: 'highlight'
    }, {
        html: 'Cell D content'
    }]
});