如何使用pressedcls更改extjs4中按钮的背景图像？

Posted 2023-02-22

【中文标题】如何使用pressedcls更改extjs4中按钮的背景图像？

【英文标题】：how to use pressedcls to change the background image of button in extjs4?

【发布时间】：2011-12-14 14:27:54

【问题描述】：

我使用 extjs4 制作了一个切换按钮组。 当我按下一个按钮时，其他按钮变为未按下。 然后我想在按下后更改按钮的背景图像。 所以我使用“pressedCls”。 代码：

Ext.define('Crm.view.CrmNavi', 
    extend: 'Ext.toolbar.Toolbar',
    height: 27,

    initComponent: function() 
        var me = this;

        Ext.applyIf(me, 
            items: [
                
                    cls: 'navi_btn',
                    overCls: 'navi_btn_over',
                    pressedCls: 'navi_btn_pressed',
                    xtype: 'button',
                    height: 24,
                    flex: 4,
                    html: 'button one'
                    toggleGroup: 'crmNaviBtnGroup',
                    enableToggle: true,
                    pressed: true
                ,
                
                    cls: 'navi_btn',
                    overCls: 'navi_btn_over',
                    pressedCls: 'navi_btn_pressed',
                    xtype: 'button',
                    height: 24,
                    flex: 4,
                    margin: '0 0 0 0',
                    html: 'button two',
                    toggleGroup: 'crmNaviBtnGroup',
                    enableToggle: true
                 
            ]
        );
    
);

//-----------------------------------------------------------
.navi_btn
    font-family: MicroSoft YaHei;
    font-weight: 5;
    font-size: 15px;
    text-align: center;
    color: #006f61; 

.navi_btn_over
    font-family: MicroSoft YaHei;
    font-weight: 3;
    font-size: 15px;
    text-align: center;
    color: #ffffff;
    background-image: url("images/crmNaviBtnPressed_bg.png");
    background-repeat: repeat-x;

.x-navi_btn_pressed
    font-family: MicroSoft YaHei;
    font-weight: 3;
    font-size: 15px;
    text-align: center;
    color: #ffffff;
    background-image: url("images/crmNaviBtnPressed_bg.png");
    background-repeat: repeat-x;

//--------------------------------------------- ---------------------

它在谷歌浏览器上运行良好。 但是在 IE8 上，背景图片设置不起作用（字体设置效果很好）。 那么，有没有什么设置可以解决这个问题呢？

【问题讨论】：

你可以为 navi_btn_pressed 发布你的 css 吗？

虽然“navi_btn_pressed”不起作用，但我在 css 文件中为“navi_btn_pressed”添加了一个“x-”。你看，我已经发布了“over”和“pressed”的css。

你现在有这个工作了吗？

@pacman 这个问题令人沮丧。与 IE6,IE7 不同的 extjs 按钮的 Html 标签......

尽可能发布更多代码和/或创建演示（例如jsfiddle.net），以便我们帮助解决问题。

【参考方案1】：

Applying a hover effect to a Container in ExtJs

很遗憾你不能使用 CSS。如果可以，那么 overCls 将是 要走的路： http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

除此之外，您的方法非常接近。应用样式对象 到 el 上不会做任何事情，因为 Ext 不知道你这样做了。 相反，您想调用 setStyle 或 applyStyles

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-applyStyles

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-setStyle

另一个可能解决的问题：Ext.Button 'overCls' not working in IE

【参考方案2】：

这是来自我的一个样本。 在 ext 中，我在工具栏上设置了以下内容：

defaults: 
  xtype: 'button',
  toggleGroup: 'crmNaviBtnGroup',
  scale: 'large',
  pressedCls: 'side-nav-blue',                
  width: 190

然后在我的css中添加了

.x-btn-side-nav-blue .x-btn-default-large-tl,
.x-btn-side-nav-blue .x-btn-default-large-bl,
.x-btn-side-nav-blue .x-btn-default-large-tr,
.x-btn-side-nav-blue .x-btn-default-large-br,
.x-btn-side-nav-blue .x-btn-default-large-tc,
.x-btn-side-nav-blue .x-btn-default-large-bc,
.x-btn-side-nav-blue .x-btn-default-large-ml,
.x-btn-side-nav-blue .x-btn-default-large-mr   
  background-image: url('../images/btn-large-side-blue-corners.gif');


.x-btn-side-nav-blue .x-btn-default-large-ml,
.x-btn-side-nav-blue .x-btn-default-large-mr   
  background-image: url('../images/btn-large-side-blue-sides.gif');


.x-btn-side-nav-blue .x-btn-default-large-mc 
  background-image: url('../images/btn-large-side-blue-fbg.gif');
  background-position: 0 top;
  background-color: #5389b6;

我正在使用带有 IE9 兼容模式的 Ext4.2 来测试它，它可以工作。您必须从 ext 主题的资源文件夹中找到角落、侧面和按钮背景的图像。