一些按钮后面的边框很奇怪[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);
            }
        }
    }
}

之后，在控制器中将进行如下定位：

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

它们渲染成这样：

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

所使用的用户界面与只更改颜色的用户界面相同。

您是否遇到过类似的问题？如果是，您是否解决了该问题以及如何解决？

非常感谢您阅读我并抽出宝贵时间回答我。

Answer 1

因此，小提琴与您的应用程序之间存在差异，但是我认为这可以有所帮助。我假设您面临的问题是由于标准ext主题CSS引起的。因此，默认情况下，您选择的ext为按钮提供了阴影CSS。但是您可以使用相同的名称覆盖它。我已经编辑了您的小提琴，没​​有使用浮动按钮，而是使用您在此处发布的UI放置了代码。因此，有两种不同的技巧，因为小提琴上的按钮具有不同的CSS，而用户界面的按钮具有不同的CSS。必须将第一个面板的背景更改为红色，因为按钮的图标为白色。您在小提琴中的按钮正在使用以下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中删除一行，这样您就会知道每一行的作用。我也是初学者。这个东西花了一些时间来玩控制台。如果您无法正常工作，请在您的实际代码中张贴小提琴，并注释链接。我会努力的。