Extjs 表布局的Colspan不工作

我正在试着在一个面板上进行表格布局工作，在我引入“colspan”之前，布局工作得很好

在api文档中， 在我把代码改为

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不工作？

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

这样，第一列占用50%的宽度，因为单元格A内容需要与单元格B内容相同的空间，第三列占用50%，因为单元格D内容需要与单元格C内容相同的空间，第二列缩减为0%

如果在单元格D下方添加一行不带colspan的内容，您可以自己看到：

{
    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
...

---

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

这实际上违背了我的理解，但我认为你是对的。在一个html表中尝试了它，我得到了相同的结果。是否有其他方法可以使用表布局实现我的目标，添加虚拟面板看起来很奇怪。