Question

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

我按照同一问题的接受答案＆＃34; How to change background of hovered and pressed extjs-button dynamically＆＃34;但对我不起作用。它只是在没有任何交互的情况下改变了ui。当我单击自定义按钮时，尽管执行了处理程序功能，它仍会切换。

ExtJS按钮有2个样式配置，根据文档：overCls和pressedCls。尽管我设置它们pressedCls配置对我来说都不起作用。

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

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

Answer 1

简单地说，每个表单组件都有一个名为＆＃34; cls＆＃34;的属性。所以你可以使用以下内容：

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;
}

Answer 2

尝试使用这些css类：

.x-btn-over.green-button

和

.x-btn-pressed.green-button

我不知道这是否更适合定义和使用自定义用户界面，但它是一个快速修复。

希望有所帮助

佩德罗

编辑（在下面的评论中添加css）

.x-btn-over.green-button {
    background: #4cc54c;
    background-color: red !important;
    background-image: none;
}
.x-btn-pressed.green-button {
    background: yellow;
    background-color:yellow !important;
    border:solid 1px red !important;
}

添加了一些您可能需要的随机属性background-image等

Answer 3

以下CSS对我有用：

.numpad-btn {
    background: #008080 !important;
}

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

.x-btn-over.numpad-btn {
    background: #00baba;
    border: solid 1px #00baba !important;
    background-color: #00baba !important;
    background-image: none;
}

.x-btn-pressed.numpad-btn {
    background: #005151;
    background-color: #005151 !important;
    border: solid 1px #005151 !important;
    background-image: none !important;
}

.x-btn-focus.numpad-btn {
    background: #008080;
}

Answer 4

我意识到这个问题与ExtJS 4有关，但是我想为那些找到此页面但想使用ExtJS 6的人添加一个解决方案。

在ExtJS 6中，您可以使用Sass创建自定义主题，这将为您生成所需的CSS类。可以在这里找到有关此问题的教程：https://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html

作为一个简单示例，此Sass片段（由Sencha Cmd处理后）导致红色按钮所需的各种CSS类。请注意，$ ui属性成为您引用此样式的名称。

@include extjs-button-small-ui(
  $ui: 'red',
  $background-color: red,
  $border-color: red,
  $color: #fff
);

您可以通过'ui'config属性将组件配置为使用这些类。例如：

{
    xtype: 'button',
    itemId: 'deleteBtn',
    ui: 'red',
    width: 180,
    text: 'Delete',
    tooltip: 'Delete this item',
    handler: 'onDeleteClick'
}

ExtJS - 如何自定义按钮？

4 个答案: