ExtJS：向表格布局添加网格面板会弄乱表格列宽答案

【问题标题】：ExtJS: Adding a grid panel to a table layout messes up the table column widthsExtJS：向表格布局添加网格面板会弄乱表格列宽
【发布时间】：2015-01-05 04:08:21
【问题描述】：

使用 ExtJS 4.2，如果我创建一个有 2 列的表格布局面板并且内部面板的内容最少，那么列宽都相等并且比例得到尊重。

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

看起来是这样的：

http://jsfiddle.net/blackfrancis75/yscjjbLf/1/

但是如果我接着往面板中添加内容，比如Ext.grid.Panel，那么列的比例就会变得一团糟；他们不再是 50/50；它看起来像这样：

http://jsfiddle.net/blackfrancis75/kh8zr80h/1/

我尝试过内部面板和autoScroll 之类的方法，但我似乎没有取得任何进展。无论内容如何，“强制”表格布局按比例设置列宽的最佳方法是什么？

【问题讨论】：

标签： javascript extjs extjs4

【解决方案1】：

尝试设置：-

 tdAttrs: {
      style: {
           width: '50%'
      }
 }

jsFiddle

【讨论】：

【解决方案2】：

Ext 中的表格布局非常简单，它只是 HTML 表格的包装器。因此，只要您需要的不仅仅是简单的 HTML 表格，我建议您使用 HBox 和 VBox 布局的组合来实现类似表格的 UI。

【讨论】：