Question

我在面板中添加了一些元素，使用'talbe'作为布局

xtype:'panel',
layout: {
    type: 'table',
    columns: 2,
}

添加了一些东西之后，我注意到当我使用“填充”或“边距”时，“左”和“左”都可以很容易地改变距离。 '右边。但是，无论我给出什么价值，“顶部”和“底部”距离都不会改变。

从Sencha doc文件和其他一些Google资源中尝试了一些东西，它们都不起作用。我列出了我在下面使用的一些选项

//1
// margin: '20 0 50 0', // Top Right Bottom Left

//2
// padding: '20px 0px 50px 0px', // Top Right Bottom Left

//3
// style:'margin-top: 155px;',

//4
// style:'padding-top: 155px;',

这些都不起作用。除此之外，我还看到其他人说我们应该修改'tableAttrs'和'tdAttrs'。我尝试了以上所有4个，仍然是相同的。

所以有两个问题：

我们应该设置另一件事来启用修改顶部和底部值吗？
尝试更改同一容器内元素之间的距离时，首选什么？填充或边距？

提前致谢！

Answer 1

请参阅以下示例。在这里，我使用了表格布局的面板项目内的填充。它工作正常。请尝试一下，让我知道结果。

如果您也使用保证金，也会出现类似的结果。所以在这种情况下可以使用任何东西。但一般来说，填充是首选。

Ext.create('Ext.panel.Panel', {
        title: 'Table Layout',
        width: 300,
        layout: {
            type: 'table',
            columns: 2
        },

        items: [{
            xtype: 'component',
            html: 'Cell A content',
            cls: 'a',
            rowspan: 2,
            padding: '50 0 20 10'
        }, {
            xtype: 'component',
            html: 'Cell B content',
            cls: 'b',
            colspan: 2,
            margin: '50 0'
        }, {
            xtype: 'component',
            html: 'Cell C content',
            cls: 'c',
            padding: '50 0'
        }],
        renderTo: Ext.getBody()
    });

这是一个显示组件填充/边距的小提琴：

https://fiddle.sencha.com/#fiddle/138v

对于单元格B，它在顶部/底部具有50px的边距，您必须检查该组件才能看到这样，但边距是存在的。 Cell C具有50px顶部/底部填充。这是边距和填充之间的差异以及它如何影响该组件。谢谢米切尔的建议。

Extjs 5.1.1无法修改布局中的填充或边距值：'table'

1 个答案: