extjs - 表布局 : broken in Firefox & didn't use 100% width of panel?

Question

我正在玩 Table Layout ExtJS 4.2.1。可以看到结果in this fiddle .

基本上我期望的是表格使用面板的 100% 宽度来正确应用 colspan。

此外，如果您使用 Firefox 查看它，它已损坏，那么也许我以错误的方式使用了此布局？

例子:

Ext.create('Ext.panel.Panel', {
    title: 'Table Layout',
    width: 300,
    height: 150,
    layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
    },
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:20px'
    },
    items: [{
        html: 'Cell B content',
        colspan: 2,
        xtype: 'panel'
    },{
        html: 'Cell C content',
        xtype: 'panel'
    },{
        html: 'Cell D content',
        xtype: 'panel'
    }],
    renderTo: Ext.getBody()
});

Answer 1

ExtJS 表格布局应该像 HTML 表格一样工作。如果您使用上面提供的配置创建一个 HTML 表格，您会得到类似的结果。 (参见 http://jsfiddle.net/h6J3J/1/)

<table border="1">
  <tr>
    <td colspan="2">Cell B content</td>
    <td>Cell C content</td>
  </tr>
  <tr>
    <td>Cell D content</td>
  </tr>
</table>

您看到的结果是因为第一行中的第一列(使用 colspan 2)在它下面的行中没有两列可以跨越。

要使表格成为面板宽度的 100%，您可以使用 tableAttrs 属性:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Table-cfg-tableAttrs

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