3

我正在玩 ExtJS 4.2.1 的表格布局。你可以在这个 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()
});
4

1 回答 1

4

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%'
        }
    }
}
于 2013-08-09T22:29:39.193 回答