Box instance is copied only to the last row

Question

I am using ExtJs 3.4.1.1

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3r90

I want to reuse box component to add spacing between elements. That is why I've created new instance at the beginning of the code:

var box = new Ext.BoxComponent({
    style: 'padding-bottom: 5px'
});

Later in code this box is applied several times. But, only at the end it actually makes spacing between buttons (see image below):

var p1 = new Ext.Container({
        renderTo: Ext.getBody(),

        items: [{
            xtype: 'panel',
            title: 'testing',
            width: 700,
            height: 700,
            layout: {
                type: 'vbox'
            },
            items: [{
                xtype: 'button',
                text: 'test',
                width: '250px'
            },
            box,
            {
                xtype: 'button',
                text: 'test',
                width: '250px'
            },
            box,
            {
                xtype: 'button',
                text: 'test',
                width: '250px'
            },
            box,
             {
                xtype: 'button',
                text: 'test',
                width: '250px'
            }

            ]
        }]
    });

How to reuse component in this case? Is it possible to make spacing on some other way?

Answer 1

"Reusing" a component this way is not a good way in my opinion. Ext JS will create the components on its own ways according to the config.

I would rather suggest using a default config on the panel and add the padding there, so that it will be applied to every button:

Ext.onReady(function () {
    var p1 = new Ext.Container({
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'panel',
            title: 'testing',
            width: 700,
            height: 700,
            layout: {
                type: 'vbox'
            },
            // all config here will be applied
            // to every item
            defaults: {
                style: 'padding-bottom: 5px',
                xtype: 'button',
                width: '250px',
            },
            items: [{
                text: 'test1',
            }, {
                text: 'test2',
            }, {
                text: 'test3',
            }, {
                text: 'test4',
            }]
        }]
    });
});