Question

当我在工具栏中将按钮停靠在右侧时，它会开始触摸工具栏的上边框，如下所示：

enter image description here

这是我的代码：

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',

    config: {
        items: [
            {
                xtype: 'textfield',
                label: 'Field'
            },
            {
                xtype: 'textfield',
                label: 'Field'
            },
            {
                xtype: 'toolbar',
                docked: 'bottom',
                items: [
                    {
                        xtype: 'button',
                        ui: 'back',
                        text: 'Back'
                    },
                    {
                        xtype: 'button',
                        docked: 'right',
                        ui: 'forward',
                        text: 'Continue'
                    }
                ]
            }
        ]
    }

});

Answer 1

这里的行为相同，也就是当我使用右边而不是对接时：10px;。

这可能是因为元素成为位置：绝对。没有一个解决方案可以防止这种情况发生，但当然你可以通过将顶部：.. px设置为按钮来纠正它。
如果你有很多像这样的按钮，请使用css类来设置它。

Answer 2

这里的行为相同，也就是当我使用右边而不是对接时：10px;。

这可能是因为元素成为位置：绝对。没有一个解决方案可以防止这种情况发生，但当然你可以通过将顶部：.. px设置为按钮来纠正它。
如果你有很多像这样的按钮，请使用css类来设置它。

请在Sencha Touch Forum

上报告

Answer 3

好的，我不确定是否有错误，但您可以通过移除docked: 'right'并在两个按钮之间添加xtype: spacer来尝试不同的方法，如下所示：

items: [
    {
        xtype: 'button',
        ui: 'back',
        text: 'Back'
    },
    {
        xtype: 'spacer'  
    },
    {
        xtype: 'button',
        ui: 'forward',
        text: 'Continue'
    }
]

Ext.Spacer组件通常用于在项目之间放置空格在Ext.Toolbar组件中。

您可以在其关于spacer here的文档中找到更多信息和示例。希望它有所帮助：）

Answer 4

我曾经有同样的问题，但我解决了！就像我一样，你使用xtype: 'toolbar'来停靠你的按钮。你必须使用的是

xtype: 'titlebar'

现在，如果标题栏中有一些按钮，只需设置align属性，如下所示：

 xtype: 'titlebar',
 items: [
      {
         xtype: 'button',
         ui: 'back',
         text: 'Back',
         align: 'left'
      },
      {
         xtype: 'button',
         ui: 'forward',
         text: 'Continue',
         align: 'right'
      }
 ]

检查Sencha文档以获取更多信息：Ext.TitleBar

按钮触摸工具栏的边框

4 个答案: