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

Question

我在使用“talbe”布局的面板中添加了一些元素

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

添加一些东西后，我注意到当我使用“填充”或“边距”时，“左侧”和“右侧”的距离可以轻松更改。但是，无论我给出什么值，“顶部”和“底部”距离都不会改变。

尝试了 Sencha 文档文件和其他一些 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 个都试过了，还是一样。

所以 2 个问题:

1. 我们是否应该设置其他东西来启用修改最高值和最低值？
2. 尝试更改同一容器内元素之间的距离时，首选什么？填充还是边距？

提前致谢!

Answer 1

请看下面的例子。在这里，我在带有表格布局的面板元素中使用了填充。它工作正常。请尝试并告诉我结果。

如果您也使用 margin ，也会出现类似的结果。所以在这种情况下可以使用任何东西。但通常首选填充。

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()
    });

这是一个显示组件填充/边距的 fiddle :

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

对于单元格 B，它在顶部/底部有 50 像素的边距，您必须检查该组件才能看到，但边距是存在的。单元格 C 具有 50px 顶部/底部填充。这就是 margin 和 padding 之间的区别以及它如何影响该组件。感谢 Mitchell 的建议。