How can I align buttons on a toolbar?

Question

In a Sencha Touch app, I am designing a layout, but I am having a problem with the position of a button..

My code is:

  config    : {
    cls: 'survey-header-edition',
    xtype: 'container',
    layout: {
      pack: 'center',
      type: 'vbox'
    },
    items: [
      {
        xtype: 'toolbar',
        layout: {
          pack: 'center',
          type: 'vbox'
        },
        items: [
          {
            xtype: 'label',
            cls   : 'survey-header-template',
            itemId: 'surveyHeaderTemplate'
          },
          {
            xtype: 'label',
            cls   : 'survey-header-customerId',
            itemId: 'surveyHeaderCustomerId'
          }
        ]
      },
      {
        xtype: 'toolbar',
        layout: {
          pack: 'center',
          type: 'hbox'
        },
        items:[
          {
            xtype     : 'segmentedbutton',
            itemId    : 'matrixSegmentedButton',
            cls: 'matrixSegmentedButton',
            items     : [
              {
                itemId  : 'presenceData',
                iconMask: true,
                pressed : true
              },
              {
                itemId  : 'auxiliaryFields',
                iconMask: true
              },
              {
                itemId  : 'profiles',
                iconMask: true
              },
              {
                itemId  : 'photos',
                iconMask: true
              }
            ]
          },
          {
            xtype : 'button',
            layout: {
              pack: 'end',
              type: 'vbox'
            },
            itemId: 'actionsButton',
            cls   : 'actionsButton',
            text  : 'actions'
          }
        ]
      }
    ]
  },

And the button called actionsButton I would like to align this button on the right, but I cannot.. any clue?

Answer 1

You can use a spacer for that:

{
    xtype : 'toolbar',
    docked: 'top',
    title: 'My Toolbar',
    items: [{
        text: 'left'
    }, {
        xtype: 'spacer'
    }, {
        text: 'right'
    }]
}