extjs 4.1：修复表格布局中可折叠面板的宽度

Question

我正在使用表格布局中的ExtJs可折叠面板。 每当我打开页面时，面板都会非常精细（宽度方向）。 请检查以下图像

但是当我折叠面板时，宽度会发生变化！ 见下图：

复制此问题的示例代码：

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'
}]
});

我还用相同的代码创建了一个小提琴。 JSFiddle Demo

请帮我解决这个问题。 无论是否折叠，我希望面板的宽度保持固定。 但我想要以百分比的方式设置宽度，而不是固定的绝对数字。

Answer 1

要将列宽设置为“100％”，请使用tableAttrs

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

同样'scrollable'和'autoScroll'不需要设置为true，因为列宽将是'100％'