extjs4 - 如何使用 ExtJS 4.1 增加 VBOX 中项目之间的间距？

Question

所以我使用的是 ExtJS 4.1。我有一个包含两个项目的视口(viewport)。它们堆叠正确，但我想在它们之间留一些空间。边距似乎不起作用。

var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

Ext.onReady(function() {
    Ext.QuickTips.init();

    window.formPanel = Ext.widget({
        bodyPadding: '5 5 0',
        collapsible: false,
        defaultType: 'textfield',
        frame: true,
        id: 'formPanel',
        layout: 'form',
        renderTo: '',
        title: 'Spring Demo 3 (Lookup Transfer Request)',
        url: contextPath + '/users/ajax',
        width: 450,
        xtype: 'form',

        buttons: [{
            text: 'Check Status',
            scope: this,
            handler: function() {
                formPanel.getForm().submit({
                    success: function(res, req) {

                    }
                });
            }
        }],

        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 105
        },

        items: [{
            afterLabelTextTpl: required,
            allowBlank: false,
            fieldLabel: 'Username',
            name: 'username',
            value: ''
        }, {
            afterLabelTextTpl: required,
            allowBlank: false,
            fieldLabel: 'TXID',
            name: 'txid',
            value: ''
        }]
    });

    window.resultsPanel = Ext.widget({
        items: [{
            id: 'labMessage',
            margin: '0 0 0 10',
            text: 'Waiting....',
            xtype: 'label'
        }],
        title: 'Results',
        xtype: 'panel'
    });

    window.viewPort = Ext.widget({
        items: [formPanel, resultsPanel],
        layout: {
            align: 'center',
            pack: 'center',
            type: 'vbox'
        },
        margins: '10 10 10 10',
        padding: '10 10 10 10',
        renderTo: 'container',
        xtype: 'viewport'
    });
});

Answer 1

Ext.layout.container.VBox 布局具有 padding 和 defaultMargins 配置，它们会将相应的样式应用于子组件。我不知道为什么命名不一致，但这就是文档所说的。

查看您的示例代码，您似乎将边距应用于错误的组件。如果您希望面板之间有间距，请将边距/填充设置放在面板本身而不是其容器上。

window.resultsPanel = Ext.widget({
    xtype:  "panel",
    title:  "Results",
    margin: "10 0 0 0",  // Same as CSS ordering (top, right, bottom, left)
    items:  [{
        xtype:  "label",
        id:     "labMessage",
        margin: "0 0 0 10",
        text:   "Waiting..."
    }]
});