Ext JS 如何设置工具栏按钮和一般按钮保持统一样式

﹏ヽ暗。殇╰゛Y 2024-03-17 16:12 46阅读 0赞

在Ext JS 中， Button的背景色保持和系统的主色调一致， 样式如下：  
![在这里插入图片描述][f7ad948c81f843e7a692492d22e31bda.png]

但是使用工具栏（toolbar） 添加按钮的时候， 按钮的背景色确实灰色，如下图所示：  
![在这里插入图片描述][d7a8a93173c247d2a54f1676dba742f6.png]

为什么会有这个差别呢？ 如何让它们保持一致呢？

### 工具栏按钮与Button不一致的原因 ###

看一下Toolbar里面的按钮最终产生的按钮的样式：  
![在这里插入图片描述][6f46fa887fff46c397f0c41067392e88.png]

Toolbar 通过样式类x-btn-default-toolbar-small 定义了按钮的背景色，这个颜色就是是灰色。

### 工具栏按钮的统一外观配置 ###

Toolbar 提供了一个配置项 defaultButtonUI ， 用于快速而简单更改所有子 Ext.button.Button 外观。

如果 defaultButtonUI 没有值，则按钮的 ui 值将附加 -toolbar，因此当 Ext.button.Button 位于 Ext.toolbar.Toolbar 中时，它具有与原生Button不同的外观。 但是可以通过配置 defaultButtonUI 的值，保持工具栏中的按钮与原生按钮相同的样式。

秘

[f7ad948c81f843e7a692492d22e31bda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/b64e1cc2d1bf4d46af9cf49e56d1457f.png
[d7a8a93173c247d2a54f1676dba742f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/2388f3c78d7b418ba7bf5b59de94ac7a.png
[6f46fa887fff46c397f0c41067392e88.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/15b2f9b953664d4e8bbbe795134cdc07.png

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关【QT】QT 按钮保持按下时的样式

按钮设计样式 MainWidget::MainWidget(QWidget parent) : QWidget(parent),

悠悠/ 2024年04月07日 14:50/ 0 赞/ 114 阅读

相关 3.3 Ext JS之按钮（button）

按钮的类型按钮类的命名空间是Ext.button，主要包含以下四种类型的按钮： <table> <thead> <tr> <th></th>

我不是女神ヾ/ 2024年03月25日 11:39/ 0 赞/ 66 阅读

相关 Ext JS中定义和使用类Ext JS风格的html 按钮

Ext JS 的按钮样式如下： ![在这里插入图片描述][86b3c540fedb453cbe09597eb860a25e.png] 按钮的背景色默认为应用的主色调或是灰色

心已赠人/ 2024年03月17日 21:19/ 0 赞/ 92 阅读

相关 Ext JS 如何设置工具栏按钮和一般按钮保持统一样式

在Ext JS 中， Button的背景色保持和系统的主色调一致，样式如下： ![在这里插入图片描述][f7ad948c81f843e7a692492d22e31bda.

﹏ヽ暗。殇╰゛Y/ 2024年03月17日 16:12/ 0 赞/ 47 阅读

相关设置按钮禁用时的样式

前言按钮有可用和不可用之分，一般按钮不可用时默认是置灰且不可点击的，但是为了配合整个项目的样式和色调，我们需要对不可用的按钮进行样式的调整。效果展示

今天药忘吃喽~/ 2023年06月01日 14:58/ 0 赞/ 21 阅读

相关单选按钮和多选按钮的样式设置

以下代码IE9以上执行没有问题: 1、css中样式设置: /父元素div/ .choice{ position: relative; } /label/ .choi

谁践踏了优雅/ 2022年07月12日 07:26/ 0 赞/ 284 阅读

相关单选按钮和多选按钮的样式设置

以下代码IE9以上执行没有问题: 1、css中样式设置: /父元素div/ .choice{ position: relative; } /label/ .choi

Bertha 。/ 2022年07月12日 07:26/ 0 赞/ 302 阅读

相关 Jquery设置按钮的样式和获取值

<div class="col-sm-6" id="nav">

女爷i/ 2022年05月27日 10:27/ 0 赞/ 200 阅读

相关 CSS按钮样式

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <t

朴灿烈づ我的快乐病毒、/ 2022年02月05日 12:59/ 0 赞/ 411 阅读

相关 input按钮上传按钮样式

主要是定位和不透明度来实现： <!DOCTYPE html> <html lang="en"> <head> <meta charse

╰半夏微凉°/ 2021年12月17日 09:37/ 0 赞/ 481 阅读