How can I increase the spacing between items in a VBOX using ExtJS 4.1?

Question

So I'm using ExtJS 4.1. I have a viewport that contains two items. They are stacked correctly but I want to put some space between them. Margins don't seem to work.

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

The Ext.layout.container.VBox layout has the padding and defaultMargins configs that will apply the respective styles to child components. I have no idea why the naming is inconsistent, but that's what the docs say.

Looking at your sample code, it looks like you're applying your margins to the wrong components. If you want spacing between your panels, put the margin/padding settings on the panels themselves instead of on their container.

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..."
    }]
});