sencha-touch - virticle space between components in sencha touch

Question

i am trying to give space between the components here is the screen shot , i want to give vertical space between lables , TextFields and button but i dont find a way to do it

here is my code

Ext.define('test.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar', 
        'Ext.Label'
    ],
    config: {
      items: [


               {
                docked: 'top',
                title: 'Test',
                ui: 'dark',
                xtype: 'titlebar'
            },

             {

                xtype:'panel',
                style:'padding:10%',
                    items:[ {
                            xtype: 'label',
                            html: 'User Name/Mobile Number',

                        },

                        {
                            xtype: 'textfield',
                        },{
                                xtype: 'label',
                                html: 'Password'
                        },{
                         xtype: 'textfield',
                        },{
                            xtype:'button',
                            text:'Login'
                        }]


            }
            ]
    }
});

Answer 1

使用该margin属性获取字段之间的空间：

{
    xtype:'panel',
    defaults: {
        margin: '20 0'
    },
    items: [
        {
            xtype: 'label',
            html: 'User Name/Mobile Number'
        },
         ....