如何对齐工具栏上的按钮？

Question

在Sencha Touch应用程序中，我正在设计一个布局，但我对按钮位置有疑问。

我的代码是：

  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'
          }
        ]
      }
    ]
  },

按下actionsButton按钮我想在右侧对齐此按钮，但我不能......任何线索？

Answer 1

您可以使用spacer：

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