当我跨过按钮时，它变成灰色 extjs

Question

new Ext.Button({
   
    text: '<div style="color: white">INFORMA</div>'
    ,style: {
       'background-color': '#0099ff',
       'border-radius': '5px',
       'padding-left': '5px',
       'padding-right': '5px',
       'padding-top': '1px',
       'padding-bottom': '1px'
   }
    ,handler : function() {
        .....
        ...
    }
})

我遇到的问题是，当我将鼠标放在按钮上时，它会变成灰色，我希望它保持与之前相同的颜色，即蓝色。我该如何解决？

鼠标到达顶部之前：

before

当鼠标到达顶部时：

after

Answer 1

以下覆盖将删除鼠标悬停颜色：

Ext.define('Override.Button', {
    override: 'Ext.Button',
    onMouseOver: function (e) {
        if (!this.disabled) {
            var internal = e.within(this.el, true);
            if (!internal) {
                //this.el.addClass('x-btn-over');
                if (!this.monitoringMouseOver) {
                    this.doc.on('mouseover', this.monitorMouseOver, this);
                    this.monitoringMouseOver = true;
                }
                this.fireEvent('mouseover', this, e);
            }
            if (this.isMenuTriggerOver(e, internal)) {
                this.fireEvent('menutriggerover', this, this.menu, e);
            }
        }
    },

    // private
    onMouseOut: function (e) {
        var internal = e.within(this.el) && e.target != this.el.dom;
        //this.el.removeClass('x-btn-over');
        this.fireEvent('mouseout', this, e);
        if (this.isMenuTriggerOut(e, internal)) {
            this.fireEvent('menutriggerout', this, this.menu, e);
        }
    }
});

new Ext.Button({
    text: '<div style="color: white">INFORMA</div>',
    style: {
        'background-color': '#0099ff',
        'border-radius': '5px',
        'padding-left': '5px',
        'padding-right': '5px',
        'padding-top': '1px',
        'padding-bottom': '1px'
    },
    renderTo: Ext.getBody(),
    handler: function () {}
})

或者您可以generate your own theme更改“.x-btn-over”CSS class.

Answer 2

这就是我解决的方法，因为 Ext.define 不起作用，感谢@Arthus Rubens 的代码：

Ext.override(Ext.Button,{
    onMouseOver: function (e) {
        if (!this.disabled) {
            var internal = e.within(this.el, true);
            if (!internal) {
                if (!this.monitoringMouseOver) {
                    this.doc.on('mouseover', this.monitorMouseOver, this);
                    this.monitoringMouseOver = true;
                }
                this.fireEvent('mouseover', this, e);
            }
            if (this.isMenuTriggerOver(e, internal)) {
                this.fireEvent('menutriggerover', this, this.menu, e);
            }
        }
    },

    onMouseOut: function (e) {
        var internal = e.within(this.el) && e.target != this.el.dom;
        this.fireEvent('mouseout', this, e);
        if (this.isMenuTriggerOut(e, internal)) {
            this.fireEvent('menutriggerout', this, this.menu, e);
        }
    }
});

第二种调用方式 handleMouseEvents:false

new Ext.Button({
    text: '<div style="color: white">INFORMA</div>',
    handleMouseEvents:false
    ,style: {
        'background-color': '#0099ff',
        'border-radius': '5px',
        'padding-left': '5px',
        'padding-right': '5px',
        'padding-top': '1px',
        'padding-bottom': '1px'
    },
    renderTo: Ext.getBody(),
    handler: function () {}
})

当我跨过按钮时，它变成灰色 extjs

When I step over the button it turns gray extjs

javascript

css

extjs