How can I get these three buttons to centered and evenly spaced within the container?

Question

Just wondering if anyone can let me know how I can get these three buttons to centered and evenly spaced within the container?

Ext.define('rpc.view.home.indexView', {
    extend: 'Ext.Panel',
    alias: 'widget.homeView',
    config: {
       items: [{
           xtype: 'panel',
           layout: { 
               type: 'vbox',
               pack: 'center'
           },
           defaults: {
               xtype: 'button',
               margin: '10 10 0 10'
           },
           items: [{
               text: 'Videos',
               cls: 'x-button-quicknav'
           }, {
               text: 'Events',
               cls: 'x-button-quicknav'
           }, {
               text: 'Sites',
               cls: 'x-button-quicknav'
           }]
        }]
    },
    initialize: function () {
        console.log('rpc.view.home.index ~ initialize');
    }
});

Answer 1

Nailed it

JS

xtype: 'container',
       layout: {
           type: 'hbox',
           pack: 'center'
       },
       defaults: {
           xtype: 'button',
           ui: 'plain',
           style: 'margin-top: 5px;'
       },
       items: [{
           text: 'Videos',
           cls: 'x-button-rpc',
           flex: 1
       }, {
           xtype: 'container',
           cls: 'x-button-rpc-spacer'
       }, {
           text: 'Events',
           cls: 'x-button-rpc',
           flex: 1
       }, {
           xtype: 'container',
           cls: 'x-button-rpc-spacer'
       }, {
           text: 'Sites',
           cls: 'x-button-rpc',
           flex: 1
       }]

CSS

.x-button-rpc{
    border-radius: 5px;
    border:1px solid #c4c4c4 !important;
    background-color: White !important;
}

.x-button-rpc-spacer{
    display: inline-block;
    width: 5px;
}