Question

我试图在Sencha Touch 2导航视图中覆盖后退按钮的CSS。使用这个CSS

#ext-container-1 .x-button {
  background: url(../images/button_zurueck.png) no-repeat;
  width: 55px;
  height: 55px;
  margin-top: 120px;
  margin-right: 26px;
  border: none;
}

我能够显示图像，但宽度属性被按钮上设置的样式属性覆盖，因此只显示按钮的一小部分。这是按钮动画后留下的样式属性的内容：

element.style {
    left: 0px !important;
    -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1) scaleZ(1) !important;
    opacity: 1 !important;
    width: 16px !important;
}

如何覆盖按钮的宽度？

Answer 1

这是2.0.0中的一个错误，Sencha已经为下一个版本修复了这个错误。

更多信息：http://www.sencha.com/forum/showthread.php?188982

Answer 2

我可以通过添加正确的填充来显示完整按钮。它很脏，但它的工作。期待Sencha Touch的下一个发布。

最后我完全摆脱了那个按钮并插入了我自己的按钮，模拟了“后退”功能。

Answer 3

在卡片上：

config: {

    defaultBackButtonText: '',
    navigationBar: {
        backButton: {
            iconCls: 'back',
            ui: 'plain'
        }
    }
}

关于CSS：

//Back
.x-button-icon.back {
background-image: url(../../resources/images/bt_seta.png);
background-repeat: no-repeat;
}

图像作为Navigationview中的后退按钮

3 个答案: