Sencha Touch：将面板右侧的按钮和面板的水平文本中心对齐

Question

我想要一个面板，只有右侧的按钮对齐。我知道'间隔'的想法。但另外我想横向设置一个html文本中心。但是使用'spacer'它实际上并不奏效。该文本并不在小组中。 'spacer'如何工作，以及如何实现我想要的？

JS-代码：

this.topPanel = new Ext.Panel({ 
     layout: 'hbox', 
     height: 50, 
        cls: 'topPanelCls', 
     items: [ 
      {xtype: 'spacer'}, 
      {html: 'TextText', width: 100, height: 30}, 
      {xtype: 'spacer'}, 
      this.forwardButton 
     ] 

}）;

'forwardButton' 的风格：

.forwardButtonCls { 
    background: #ccc; 
    color: #ffffff; 
    font-size: 14px; 
    border: none; 
    vertical-align: center; } 

topPanel的风格：

.topPanelCls { 
    margin: 10px 0px 0px 0px; } 

.topPanelCls .x-panel-body { 
    background-color: #fff !important; 
    background-image: none !important; 
    width: 700px; 
    border:4px solid #ccc; } 

任何想法，我怎么能解决我的问题？

Answer 1

我有类似的问题。我想要在左侧有一个后退按钮，并且中间有一个分段按钮。我所做的是将backbutton flex属性设置为1，它运行良好。 segmentedbutton现在为我居中。希望这有助于解决您的问题。

{xtype: 'toolbar',ui: 'light',pack: 'center', items:[ 
       {xtype: 'BackButton', flex: 1}, 
       {xtype: 'segmentedbutton', items:[ 
           {text: 'Active', pressed: true}, 
           {text: 'Won'}, 
           {text: 'Lost'} 
       ]}, 
       {xtype: 'spacer'} 
      ]}