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

[rockinthesixstring]

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: 'container',
           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');
    }
});

[jurrie]

We use a toolbar with spacers for our button bar which works out great, f.e.:

{    xtype: 'toolbar',
    ui: 'light',
    style: 'background: #444',
    defaults: {
        iconMask: true,
        iconAlign: 'center',
        pack: 'justify',
        badgeCls: 'x-badge badge-left',
        style: 'font-size: .8em',
        ui: 'plain'
    },
    items: [
        { xtype: 'spacer' },
        { iconCls: 'video' },
        { xtype: 'spacer' },
        { iconCls: 'photo1' },
        { xtype: 'spacer' },
        { iconCls: 'locate4' },
        { xtype: 'spacer' },
        { iconCls: 'chat3' },
        { xtype: 'spacer' },
        { iconCls: 'nodes2' },
        { xtype: 'spacer' }
    ]
}

Hope this helps.

[rockinthesixstring]

This got me most of the way there. I really didn't want to use a "toolbar" simply because of the theming... but I just cheated and set it to a non-useful theme "none"

Ext.define('rpc.view.home.indexView', {    extend: 'Ext.Panel',
    alias: 'widget.home-indexView',
    config: {
       items: [{
           xtype: 'toolbar',
           ui: 'none',
           defaults: {
               iconAlign: 'center',
               iconMask: true,
               pack: 'justify',
               ui: 'plain',
               style: 'border: 1px solid #c4c4c4; background-color: White;',
               flex: 1
           },
           items: [{
               text: 'Videos'
           }, {
               text: 'Events'
           }, {
               text: 'Sites'
           }]
        }]
    },
    initialize: function () {
        console.log('rpc.view.home.index ~ initialize');
    }
});

[Jamie Avins]

You can just use a container with an hbox layout and pack center.

config: {
    layout: {
        type: 'hbox',
        pack: 'center'
    }
}

[rockinthesixstring]

You're right, this works equally well

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