javascript - ExtJS - 如何自定义按钮？

Question

我需要创建一些自定义按钮 - 例如带有白色文本的红色按钮、带有白色文本的绿色按钮等。

我遵循了同一问题“How to change background of hovered and pressed extjs-button dynamically”的公认答案，但对我没有用。它只是在没有任何交互的情况下更改用户界面。当我单击自定义按钮时，尽管执行了处理函数，它还是会切换。

根据文档，ExtJS 按钮有 2 种样式配置:overCls 和 pressedCls。尽管我设置了它们，但 pressedCls 配置对我不起作用。

为了创建我自己的按钮，我应该覆盖/定义哪些 css 属性？

Sencha Fiddle 链接:https://fiddle.sencha.com/#fiddle/fim

Answer 1

简单地说，每个表单组件都有一个名为“cls”的属性。所以你可以使用以下内容:

cls: 'myclass'

编辑上一期:

您必须覆盖 x-btn-focus 类，以删除/替换蓝色背景颜色:

.x-btn-focus.green-button { 
  background:#46a546;
}

编辑 fiddle 的 CSS:

.green-button{
    background:#46a546;
    border: none;!important;
    color: #ffffff;!important;
}

.green-button .x-btn-inner {
    color: #ffffff;
}


.green-button-over {
    background: #4cc54c;
    border: none;
}


.x-btn-over.green-button {
    background: #4cc54c;
    border-color: #4cc54c;
}

.x-btn-pressed.green-button {
    background: #5b9f5b;
    border-color: #5b9f5b;
}
.x-btn-focus.green-button { 
  background:#46a546;
}