Question

我正在尝试在面板上进行表格布局工作，布局工作正常，直到我介绍＆＃34; colspan＆＃34;它。

在api docs http://docs.sencha.com/extjs/6.0.1-classic/Ext.layout.container.Table.html中，有一个小提琴，运行良好，直到我将代码更改为

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',
        style: 'border: 1px solid black'
    },
    items: [{
        html: 'Cell A content'
    },{
        html: 'Cell B content',
        colspan: 2
    },{
        html: 'Cell C content',
        colspan: 2
    },{
        html: 'Cell D content'
    }],
    renderTo: Ext.getBody()
});

请注意，所有单元格现在具有相等的宽度。为什么colspan不工作？

Answer 1

它正在工作，但并不像您预期的那样，因为每个单元格都占用了所需的空间，并且列的大小也相应。

这样，第一列占据宽度的50％，因为Cell A内容需要与Cell B内容一样多的空间，第三列需要50％，因为Cell D内容需要与Cell C内容一样多的空间，并且第二列减少到0％。

如果你在没有colspan的情况下添加Cell D行，你可以自己看看：

{
    html: 'Cell E content',
},{
    html: 'Cell F content'
},{
    html: 'Cell G content'
}

然后你看到colspan工作正常。

更新：我刚刚找到了解决方法。找到......并不容易......

首先，您必须为布局添加宽度：

    columns: 3,
    tdAttrs:{
        width:100
    }

其次，您必须为所有单元格添加宽度：

    html: 'Cell A content',
    width:100
},{
    html: 'Cell B content',
    colspan: 2,
    width:200
...

不要问为什么它有效，我只是不知道，这完全违反直觉。

表格布局的Colspan无法正常工作

1 个答案: