ExtJS - 如何自定义按钮？

Question

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

我按照同样问题的接受答案" 如何动态改变悬停和按下extjs按钮的背景 ",但对我来说不起作用.它只是在没有任何交互的情况下改变了ui.当我单击自定义按钮时,尽管执行了处理程序功能,它仍会切换.

ExtJS按钮有2个样式配置根据文档:overCls和pressedCls.尽管我设置了它们,但两种pressedCls配置对我来说都不起作用.

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

Sencha Fiddle Link:https://fiddle.sencha.com/#fiddle/fim

Answer 1

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

cls: 'myclass'

编辑上一期:

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

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

编辑你的小提琴的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;
}