Question

我正在玩ExtJS 4.2.1的Table Layout。您可以看到结果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%'
        }
    }
}

表格布局：在Firefox＆amp;没有使用100％宽度的面板？

1 个答案: