Question

当我创建一个像下面这样的工具栏时，标题放在最后一个按钮的右边，任何想法如何修复它？

        {
        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

Answer 1

在回答这个问题之后，我找到了“居中”属性并查看了sencha的title元素的创建，所以请忘记以上内容并在配置中使用：

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

Answer 2

我还在和工具栏打架。然后我发现了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'
        }
    ]
}

Answer 3

在Sencha 2中没有＆＃34;特殊＆＃34; title元素，它被创建为＆＃34; items＆＃34;中的简单元素。所以我将来，您可以通过将配置放置到停靠栏上来直接将它添加到正确的位置：

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

只有间隔物才在中间。

Answer 4

在文档中明确指出，NavigationBar是框架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，这只是一个错误，标题没有居中，我们应该等待下一个版本。在此期间，如果需要，您可以使用导航栏。

Answer 5

如果您想利用类似于工具栏中标题的行为Ext.navigation.Bar的内容。请参阅Ext.TitleBar http://docs.sencha.com/touch/2-0/#!/api/Ext.TitleBar

此类通过自动添加省略号来处理长标题等内容，标题始终水平居中。

Answer 6

不再有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);

Sencha Touch v2工具栏标题对齐

6 个答案: