0

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

在此处输入图像描述

这是我的代码：

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

});
4

4 回答 4

0

我以前也有同样的问题，但是我解决了！就像我一样，您使用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 Docs 了解更多信息：Ext.TitleBar

于 2012-11-15T13:21:39.640 回答
0

这里的行为相同，当我使用 right:10px; 而不是停靠在右侧时也是如此。

这可能是由于元素变为 position:absolute 造成的。没有解决方案可以从一开始就防止这种情况发生，但是您当然可以通过将 top:..px 设置为按钮来纠正它。
如果您有很多这样的按钮，请使用 css 类来设置它。

于 2012-10-23T07:54:50.233 回答
0

这里的行为相同，当我使用 right:10px; 而不是停靠在右侧时也是如此。

这可能是由于元素变为 position:absolute 造成的。没有解决方案可以从一开始就防止这种情况发生，但是您当然可以通过将 top:..px 设置为按钮来纠正它。
如果您有很多这样的按钮，请使用 css 类来设置它。

也请在Sencha Touch 论坛上报告

于 2012-10-23T08:00:34.753 回答
0

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

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

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

spacer 您可以在他们关于此处的文档中找到更多信息和示例。希望能帮助到你 ：）

于 2012-10-25T03:47:19.267 回答