Sencha Touch v2工具欄標題調整

當我創建一個如下圖所示的工具欄時，標題錯位在最後一個按鈕的右側，任何想法如何解決？Sencha Touch v2工具欄標題調整

 { 
     xtype: 'toolbar', 
     docked: 'top', 
     title: 'Chat', 
     items: [{ 
      xtype: 'button', 
      text: 'Places', 
      ui: 'back', 
      id: 'backToPlaces' 
     }, 
     { 
      xtype: 'spacer' 
     }, 
     { 
      xtype: 'button', 
      text: 'People', 
      ui: 'forward', 
      id: 'toProfiles' 
     }

enter image description here

來源

2011-12-04 Osman Alpay

我也與戰鬥工具欄。然後我發現navigationbar。標題在中心。一個按鈕左右對齊。（見信息align屬性）

{ 
    docked: 'top', 
    xtype: 'navigationbar', 
    title: 'Chat', 
    items: [ 
     { 
      xtype: 'button', 
      ui: 'back', 
      action: 'back', 
      text:'BACK', 
      itemId: 'backButton' 
     }, 
     { 
      xtype: 'button', 
      ui: 'decline', 
      action: 'cancel', 
      text:'Cancel', 
      itemId: 'cancelButton', 
      align : 'right' 
     } 
    ] 
}

來源

2011-12-05 13:39:43

謝謝，我希望他們已經在例子中使用它。 –

此組件存在於Sencha Touch 2的早期預覽版本中，但不再存在。相反，你應該在Sencha Touch 2.0中使用'Ext.TitleBar'組件。更多信息[這裏]（http://stackoverflow.com/questions/8375676/sencha-touch-v2-toolbar-title-alingment/9779522#9779522）。 – rdougan

是的。這個問題和答案是針對測試版發佈的。新版本中還有一個「導航視圖」。這爲您簡化了後退按鈕的導航。 –

在煎茶2有沒有「特殊」的標題元素，它創建爲在「項目」簡單的元素。所以，我的未來，你可以在正確的地方添加它direcly通過將配置到您的停靠欄：

var myToolbar = new Ext.Toolbar({ 
       docked : 'top', 
       items : [{ 
        xtype: 'spacer', 
       },{ 
        xtype: 'title', 
        title : 'Hello World' 
       },{ 
        xtype: 'spacer', 
       }] 
      });

只有間隔是在中間。

來源

2011-12-05 11:17:04 anj

對我來說（V1）這產生了：'未捕獲的企圖創造一個尚未註冊的的xtype組件：title' – dkamins

剛過回答這個問題，我找到了「中心」的屬性，看着創作煎茶的標題元素的，所以就忘了這上面，並在你的配置使用：

var myToolbar = new Ext.Toolbar({ 
       docked : 'top', 
       title: { 
        title: 'my Title', 
        centered: true 
       }, 
       items : [] 
      });

來源

2011-12-05 11:33:40 anj

我發現這更可靠比導航欄。 – typemismatch

它在文檔是導航欄是由框架http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.Bar和ANJ文件檔案化管理的中心屬性內部使用的私有類如預期（至少在最新不起作用明確說明發布）。

根據這篇文章http://www.sencha.com/forum/showthread.php?161082-PR3-Toolbar-title-position-broken-when-spacers-control-button-positioning&p=691928這只是一個錯誤，標題不居中，我們應該等待下一個版本。在此期間，如果需要，您可以使用導航欄。

來源

2011-12-15 15:07:21 Palo

如果您想利用類似於工具欄中的標題行爲的Ext.navigation.Bar。請參見擴展標題欄http://docs.sencha.com/touch/2-0/#!/api/Ext.TitleBar

該類通過自動添加省略號來處理諸如長標題之類的內容，並且標題始終居中居中。

來源

2012-03-19 19:05:09

不再有NavigationBar組件是公開的。它僅由NavigationView內部使用。你應該從來沒有使用這個。您可以使用Ext.TitleBar。這使您可以將title配置居中並使用項目上的align屬性（通常爲按鈕）將它們對齊到左側或右側。

當標題太長或任何項目太寬時，它也具有內置支持。它會自動將所有項目的長度限制在一定的寬度，並在需要時將橢圓添加到標題中。

下面是一個簡單的例子：

var titleBar = Ext.create('Ext.TitleBar', { 
    docked: 'top', 
    title: 'Navigation', 
    items: [ 
     { 
      iconCls: 'add', 
      iconMask: true, 
      align: 'left' 
     }, 
     { 
      iconCls: 'home', 
      iconMask: true, 
      align: 'right' 
     } 
    ] 
}); 

Ext.Viewport.add(titleBar);

來源

2012-03-19 23:37:51 rdougan

Sencha Touch v2工具欄標題調整

回答

相關問題