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

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