1

当我创建一个像下面这样的工具栏时，标题错放在最后一个按钮的右侧，有什么解决方法的想法吗？

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

在此处输入图像描述

4

6 回答 6

4

我也在与工具栏作斗争。然后我发现了navigationbar. 标题在中间。带有左右对齐的按钮。（见对齐属性）

 {
    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-05T13:39:43.357 回答
4

在回答完这个问题后，我找到了“居中”属性并查看了 sencha 的标题元素的创建，所以只需忘记上面的这个并在您的配置中使用：

var myToolbar = new Ext.Toolbar({
                docked : 'top',
                title: {
                  title: 'my Title',
                  centered: true 
                },
                items : []
            });
于 2011-12-05T11:33:40.283 回答
0

在 Sencha 2 中没有“特殊”标题元素，它被创建为“项目”中的简单元素。所以我未来，您可以通过将配置放置到停靠栏来直接将其添加到正确的位置：

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

仅使用垫片位于中间。

于 2011-12-05T11:17:04.377 回答
0

文档中明确指出 NavigationBar 是一个私有类，供框架http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.Bar和 centered 属性使用by anj 没有按预期工作（至少在最新版本中）。

根据这篇文章http://www.sencha.com/forum/showthread.php?161082-PR3-Toolbar-title-position-broken-when-spacers-control-button-positioning&p=691928这只是一个错误标题未居中，我们应该等待下一个版本。同时，如果需要，您可以使用导航栏。

于 2011-12-15T15:07:21.230 回答
0

不再有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-19T23:37:51.580 回答
0

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

此类通过自动添加省略号为您处理长标题之类的事情，并且标题始终水平居中。

于 2012-03-19T19:05:09.053 回答