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

【问题标题】：extjs 4.1: Fix width of collapsible panels in table layoutextjs 4.1：修复表格布局中可折叠面板的宽度
【发布时间】：2014-01-14 19:14:19
【问题描述】：

我正在处理表格布局中的 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

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

【问题讨论】：

标签： extjs extjs4 panel extjs4.1

【解决方案1】：

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

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

'scrollable' 和 'autoScroll' 也不需要设置为 true，因为列宽将是 '100%'

【讨论】：

也试过了，但没有改变。当处于折叠状态时，可折叠面板和可折叠字段集仍然会更改宽度。
您的意思是在折叠状态下高度会发生变化吗？检查这个小提琴：fiddle.sencha.com/#fiddle/2dm
检查这个小提琴..这才是真正的问题..jsfiddle.net/ATechieDiary/8MjZa