一些按钮后面的奇怪边框 [EXTJS 6.5.2]

Question

我遇到了一个关于浮动按钮的奇怪问题。事实上，当我创建一个按钮然后使用 setPosition 函数将其重新定位时，会出现下边框。

更多解释：

我有一个为平板电脑设计的界面，上面有很多按钮，有些是静态的，有些是浮动的。

静态按钮的创建方式与视图中的一样：

{
    xtype: 'button',
    scale: 'large',
    height: 60,
    width: 60,
    margin: 10,
    ui: 'lstbuttonclrounded-red',
    cls: 'x-btn-action',
    iconCls: 'x-fa fa-arrow-left'
}

然后他们渲染成这样：

浮动按钮在视图中的创建方式如下：

{
    xtype: 'panel',
    [...]
    listeners: {
        afterrender: { 
            fn: function(){
                var obj = Ext.create({
                    xtype: 'button',
                    width: 60,
                    height: 60,
                    ui: 'lstbuttonclrounded',
                    iconCls: 'x-fa fa-floppy-o',
                    scale: 'large',
                    scope: this.getController(),
                    floating: true,
                    renderTo: this.body
                });

                this.saveBtn = this.add(obj);

                obj.setPosition(0, 0);
            }
        }
    }
}

之后在controller中有这样的定位：

this.saveBtn.setPosition(this.getWidth()-70, this.getHeight() - 105);

它们会这样渲染：

这是出现奇怪边框的地方...

使用的 UI 相同，只是颜色发生了变化。

您遇到过类似的问题吗？如果有，您解决了吗？如何解决的？

非常感谢您阅读我的文章并花时间回答我。

Answer 1

因此 fiddle 和您的应用程序之间存在差异，但我认为这会有所帮助。我假设您面临的问题是由于标准分机主题 CSS。所以默认情况下，您选择的分机会给您的按钮一个阴影 CSS。但是您可以使用相同的名称覆盖它。我已经编辑了您的 fiddle，而不是浮动按钮，我将您的代码与您 post 编辑的 UI 东西放在了这里。所以有两种不同的 hack，因为 fiddle 上的按钮有不同的 css，你的 ui 上的按钮有不同的。必须将第一个面板的背景更改为红色，因为按钮的图标为白色。您在 fiddle 中的按钮正在使用此 css：

.x-btn-default-large

所以在 html 我添加了一个同名的新样式：

.x-btn-default-large {
background-color: red !important;
border-color: transparent !important;
}

对于 UI 按钮，它使用此 css 添加阴影：

.x-css-shadow

所以我将那个调整为：

.x-css-shadow{
box-shadow: none !important;
}

请查看此 fiddle 以获得更好的解释。请务必检查 index.html，这是主要魔法发生的地方。尝试一次从 css 中删除一行，这样您就会知道每一行的作用。我也是初学者。这件事花了一些时间玩控制台。如果你不能让它工作，那么请 post 一个 fiddle 用你的实际代码并评论 link。我会努力的。

一些按钮后面的奇怪边框 [EXTJS 6.5.2]

Strange border behind some button [EXTJS 6.5.2]

extjs

extjs6

extjs6-classic

更多解释：

静态按钮的创建方式与视图中的一样：

浮动按钮在视图中的创建方式如下：

这是出现奇怪边框的地方...