ExtJS：将网格面板添加到 table 布局会弄乱 table 列宽

Question

使用 ExtJS 4.2，如果我创建一个 table 布局面板，其中包含 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 等方法，但我似乎没有任何进展。 'force' table 布局按比例设置列宽而不考虑其内容的最佳方法是什么？

Answer 1

尝试设置：-

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

jsFiddle

Answer 2

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

ExtJS：将网格面板添加到 table 布局会弄乱 table 列宽

ExtJS: Adding a grid panel to a table layout messes up the table column widths

javascript

extjs

extjs4