ExtJS - 如何自定义按钮？

Question

ExtJS - 如何自定义按钮？

javascripthtmlcssextjsextjs4

3

我需要创建一些自定义按钮，比如红色按钮和白色文本、绿色按钮和白色文本等。

我遵循了同一个问题的被接受答案"如何动态更改鼠标悬停和按下时extjs-button的背景"，但对我没有用。它只是改变了UI而没有任何交互。当我点击自定义按钮时，它会切换，尽管处理程序函数已执行。

根据文档，ExtJS按钮有两个配置用于样式：overCls 和 pressedCls。尽管我将它们都设置为pressedCls，但该配置对我不起作用。

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

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

- talha06

4个回答

1

尝试使用这些CSS类：

.x-btn-over.green-button

并且

.x-btn-pressed.green-button

我不知道这是否优于定义和使用自定义UI，但这是一个快速解决方法。

希望能有所帮助。

Pedro

编辑（添加如下评论中的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等。

- Pedro Reis

不幸的是，它对我没有起作用。您有机会查看我为此创建的示例：https://fiddle.sencha.com/#fiddle/fim - talha06

1

我认为问题在于CSS本身，有时为了正确覆盖CSS属性，需要在分号之前添加!important。以下是代码示例：.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;}无法格式化评论，我会尝试将它们添加到我的答案中，已在您的fiddle上进行了测试，似乎可以正常工作。 - Pedro Reis

谢谢您的关注；除了按下按钮时背景变成蓝色之外，一切都很完美。 - talha06

1

尝试将 --- background-image: none !important; --- 添加到 x-btn-pressed 类中。 - Pedro Reis

1

根据@Tyr的建议，需要使用.x-btn-focus.green-button { background:#46a546;}将按钮的颜色在点击后变回来。 - talha06

显示剩余2条评论

0

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

- Qamar Tahir

0

我知道这个问题与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”配置属性来配置组件以使用这些类。例如：

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

- Mike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tyr · Accepted Answer

简单来说，每个表单组件都有一个叫做"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;
}