表格布局：在Firefox中损坏并且没有使用100%的面板宽度？

我正在玩ExtJS 4.2.1的表布局。你可以在这把小提琴上看到结果。

基本上，我所期望的是表格使用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()
});

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.contain.Table-cfg-tableAttrs

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

相关内容

最新更新

热门标签：