Extjs I can't separate the panel and button items

Question

var panelMain = new Ext.Panel({
        ,autoHeight: true
        ,autoWidth: true
        ,bodyStyle: 'padding:10px'
        ,nombreTab : 'cabeceraDinamica'
        ,items:[
                    {
                        style: 'float:left;'
                        ,border: false
                        ,items:[panelColumna1,fileBtn]
                    }
                ]
    });

I can't separate the panel and button items, I have tried in style to add margin-bottom: 20px; How could I solve it? Since both items come out together at the bottom

panelColumna1 --> is a Panel filetBtn --> is a btn

 var fileBtn =  new Ext.Button({
        text    : 'Botón prueba',
        id: 'botonId',
        handler : myBtnHandler
    });

Answer 1

You may use the margin property. https://fiddle.sencha.com/#view/editor&fiddle/3avt

var fileBtn = new Ext.Button({
    text: 'Botón prueba',
    id: 'botonId',
    margin: {
        top: 10,
        left :0
    }
});
var panelColumna1 = new Ext.Panel({
    title: 'panelColumna1'

});

var panelMain = new Ext.Panel({
    autoHeight: true,
    autoWidth: true,
    renderTo: Ext.getBody(),
    items: [{
        style: 'float:left;',
        border: false,
        items: [panelColumna1, fileBtn]
    }]
});