Learn how to dynamically alter the background of an ExtJS button when it is hovered over or pressed

Question

Learn how to dynamically alter the background of an ExtJS button when it is hovered over or pressed

Greetings,

I am looking to dynamically change the background-color for different states (normal, hover, pressed) of a button. Here is what I have come up with so far: http://jsfiddle.net/suamikim/c3eHh/

Ext.onReady(function() {
    function updateBackground() {
        var theWin = win || this,
            btn = theWin.down('#btnTest'),
            bckgr = theWin.down('#btnBckgr').getValue(),
            bckgrHover = theWin.down('#btnBckgrHover').getValue(),
            bckgrPressed = theWin.down('#btnBckgrPressed').getValue();

        $('#' + btn.id).css('background', bckgr);

        $('#' + btn.id).hover(function() {
                $('#' + btn.id).css('background', bckgrHover);
            }, function() {
                $('#' + btn.id).css('background', bckgr);
            }
        );

        $('<style type="text/css"> #' + btn.id + '.x-btn-pressed { background: ' + bckgrPressed + ' !important } </style>').appendTo('head');
    };

    var win = Ext.create('Ext.window.Window', {
        width: 800,
        height: 200,
        layout: 'fit',
        
        // Additional code omitted for brevity

        listeners: {
            'afterrender': updateBackground
        }
    }).show();
});

This approach works but raises some questions:

1)

Is it necessary or safe to call the hover function in jQuery every time updateBackground is called?

According to the jQuery documentation (http://api.jquery.com/hover/), this function binds functions to mouse events. Does it create new bindings each time, update existing ones, or handle disposal automatically?

2)

Setting styles as document-level for the pressed state can clutter the document header if updateBackground is called frequently. Is there a better approach or a way to remove previously set styles before adding new ones?

3)

The hover state's background does not show when the button is pressed due to the !important flag. Removing it causes issues with displaying the pressed background correctly. Any solutions?

Please provide suggestions that are generic and adaptable to other Ext controls beyond buttons like panels, checkboxes, etc. Thank you.

javascript jquery css extjs extjs4

Answer 1

Answer №1

By using more specific CSS selectors, you can utilize Ext's pressedCls and overCls configurations. Check out these links for more information: Link 1 | Link 2

.x-btn.my-over {
    background: blue;
}
/*Ext is not consistent */
.x-btn.x-btn-my-pressed {
    background: red;
}


new Ext.button.Button({
    overCls : 'my-over',
    pressedCls : 'my-pressed',
    //needs to be true to have the pressed cls show
    enableToggle : true,
    text : 'My button',
    renderTo : Ext.getBody(),
})

Here's an edited version for a more dynamic and generic solution:


Ext.define('DynamicStyleState', {
    alias : 'plugin.dynamicStyleState',
    extend : Ext.AbstractPlugin,
    
    elementProperty : 'el',

    pressed : false,

    init : function(component) {
        this.component = component;
        this.component.on('afterrender', this._onAfterrender, this);
    },

    clearStyle : function() {
        this.el.setStyle({
            background : ''
        });
    },
    
    getHoverStyle : function() {
        return {
            background : 'blue'
        };
    },
    
    getPressedStyle : function() {
        return {
            background : 'red'
        };
    },

    _onAfterrender : function() {
        this.el = this.component[this.elementProperty];
        this.el.hover(this._onElementMouseIn, this._onElementMouseOut, this);
        this.el.on('click', this._onElementClick, this);
    },

    _onElementMouseIn : function() {
        if(!this.pressed) {
            this.el.setStyle(this.getHoverStyle());
        }
    },

    _onElementMouseOut : function() {
        if(!this.pressed) {
            this.clearStyle();
        }
    },

    _onElementClick : function(e) {
        this.pressed = !this.pressed;
        if(this.pressed) {
            this.el.setStyle(this.getPressedStyle());
        } else {
            if(e.within(this.el)) {
                this.el.setStyle(this.getHoverStyle());
            }
        }
    }
});

This solution extends beyond buttons and can be used on any component.

Below is an example of how it can be implemented:


var headerHoverColor = new Ext.form.field.Text({
    fieldLabel : 'Header hover color',
    value : 'orange',
    renderTo : Ext.getBody()
});

var headerPressedColor = new Ext.form.field.Text({
    fieldLabel : 'Header pressed color',
    value : 'black',
    renderTo : Ext.getBody()
})

new Ext.panel.Panel({
    plugins : {
        ptype : 'dynamicStyleState',
        elementProperty : 'body'
    },
    header : {
        plugins : {
            ptype : 'dynamicStyleState',
            getHoverStyle : function() {
                return {
                    background : headerHoverColor.getValue()
                }
            },
            getPressedStyle : function() {
                return {
                    background : headerPressedColor.getValue()
                }
            }
        }
    },
    height : 300,
    width : 300,
    renderTo : Ext.getBody(),
    title : 'Panel'
});

Answer 2

By using more specific CSS selectors, you can utilize Ext's pressedCls and overCls configurations. Check out these links for more information: Link 1 | Link 2

.x-btn.my-over {
    background: blue;
}
/*Ext is not consistent */
.x-btn.x-btn-my-pressed {
    background: red;
}


new Ext.button.Button({
    overCls : 'my-over',
    pressedCls : 'my-pressed',
    //needs to be true to have the pressed cls show
    enableToggle : true,
    text : 'My button',
    renderTo : Ext.getBody(),
})

Here's an edited version for a more dynamic and generic solution:


Ext.define('DynamicStyleState', {
    alias : 'plugin.dynamicStyleState',
    extend : Ext.AbstractPlugin,
    
    elementProperty : 'el',

    pressed : false,

    init : function(component) {
        this.component = component;
        this.component.on('afterrender', this._onAfterrender, this);
    },

    clearStyle : function() {
        this.el.setStyle({
            background : ''
        });
    },
    
    getHoverStyle : function() {
        return {
            background : 'blue'
        };
    },
    
    getPressedStyle : function() {
        return {
            background : 'red'
        };
    },

    _onAfterrender : function() {
        this.el = this.component[this.elementProperty];
        this.el.hover(this._onElementMouseIn, this._onElementMouseOut, this);
        this.el.on('click', this._onElementClick, this);
    },

    _onElementMouseIn : function() {
        if(!this.pressed) {
            this.el.setStyle(this.getHoverStyle());
        }
    },

    _onElementMouseOut : function() {
        if(!this.pressed) {
            this.clearStyle();
        }
    },

    _onElementClick : function(e) {
        this.pressed = !this.pressed;
        if(this.pressed) {
            this.el.setStyle(this.getPressedStyle());
        } else {
            if(e.within(this.el)) {
                this.el.setStyle(this.getHoverStyle());
            }
        }
    }
});

This solution extends beyond buttons and can be used on any component.

Below is an example of how it can be implemented:


var headerHoverColor = new Ext.form.field.Text({
    fieldLabel : 'Header hover color',
    value : 'orange',
    renderTo : Ext.getBody()
});

var headerPressedColor = new Ext.form.field.Text({
    fieldLabel : 'Header pressed color',
    value : 'black',
    renderTo : Ext.getBody()
})

new Ext.panel.Panel({
    plugins : {
        ptype : 'dynamicStyleState',
        elementProperty : 'body'
    },
    header : {
        plugins : {
            ptype : 'dynamicStyleState',
            getHoverStyle : function() {
                return {
                    background : headerHoverColor.getValue()
                }
            },
            getPressedStyle : function() {
                return {
                    background : headerPressedColor.getValue()
                }
            }
        }
    },
    height : 300,
    width : 300,
    renderTo : Ext.getBody(),
    title : 'Panel'
});

Answer 3

Answer №2

After careful consideration, I have devised a solution that effectively addresses the issues previously outlined:

The approach involves adding both the pressed and hovered styles directly to the header.

To ensure the cleanliness of the header, I dynamically remove existing style elements using jQuery's detach-function before appending new ones.

Here is a working example

Below is the code snippet for dynamically changing the background:

function updateBackground() {
    var theWin = win || this, // necessary due to the call from the afterrender-event
    btn = theWin.down('#btnTest'),
    bckgr = theWin.down('#btnBckgr').getValue(),
    bckgrHover = theWin.down('#btnBckgrHover').getValue(),
    bckgrPressed = theWin.down('#btnBckgrPressed').getValue();

    // Set normal background as button-style
    // Should be ok
    $('#' + btn.id).css('background', bckgr);

    // Set the background for hovered and pressed button as document style
    // Remove style-element if it already exists to not pollute the document-head
    $('head style:contains("' + btn.id + ':hover")').detach();
    $('<style type="text/css"> #' + btn.id + ':hover { background: ' + bckgrHover + ' !important } </style>').appendTo('head');

    $('head style:contains("' + btn.id + '.x-btn-pressed")').detach();
    $('<style type="text/css"> .x-body #' + btn.id + '.x-btn-pressed { background: ' + bckgrPressed + ' !important } </style>').appendTo('head');
};

This method seems effective to me, but I am open to any suggestions or improvements!

Thank you.

Answer 4

After careful consideration, I have devised a solution that effectively addresses the issues previously outlined:

The approach involves adding both the pressed and hovered styles directly to the header.

To ensure the cleanliness of the header, I dynamically remove existing style elements using jQuery's detach-function before appending new ones.

Here is a working example

Below is the code snippet for dynamically changing the background:

function updateBackground() {
    var theWin = win || this, // necessary due to the call from the afterrender-event
    btn = theWin.down('#btnTest'),
    bckgr = theWin.down('#btnBckgr').getValue(),
    bckgrHover = theWin.down('#btnBckgrHover').getValue(),
    bckgrPressed = theWin.down('#btnBckgrPressed').getValue();

    // Set normal background as button-style
    // Should be ok
    $('#' + btn.id).css('background', bckgr);

    // Set the background for hovered and pressed button as document style
    // Remove style-element if it already exists to not pollute the document-head
    $('head style:contains("' + btn.id + ':hover")').detach();
    $('<style type="text/css"> #' + btn.id + ':hover { background: ' + bckgrHover + ' !important } </style>').appendTo('head');

    $('head style:contains("' + btn.id + '.x-btn-pressed")').detach();
    $('<style type="text/css"> .x-body #' + btn.id + '.x-btn-pressed { background: ' + bckgrPressed + ' !important } </style>').appendTo('head');
};

This method seems effective to me, but I am open to any suggestions or improvements!

Thank you.

Learn how to dynamically alter the background of an ExtJS button when it is hovered over or pressed

1)

2)

3)

Answer №1

Answer №2

Similar questions

Conceal the ::before pseudo-element when the active item is hovered over

Navigate to the bottom of a Vue modal window by scrolling down

Tips for simulating next/router in vitest for unit testing?

Experience choppy scrolling in Internet Explorer

Styling with CSS: I am looking to display images beneath text

Automated email formatting for a polished presentation

Retrieve the information from a website and display it on the current webpage using an ajax request

What is the best way to fill a "multiselect" element with information from a JSON object?

Navigate to the end of a container

Is there a way to determine my position in the cycle of WebGL/THREE radians that range from 0 to 1.57, then back to 0, and down to -1.57?

Is it possible for Typescript to encounter an error when using console.log() with a variable of type "any"?

The Google Maps API functions flawlessly on Chrome and Firefox, however, Internet Explorer seems to be having trouble running it

Using data attributes in Material UI: A comprehensive guide

Is it considered a bad practice to use the record ID on a <tr> element for an editable row within a table?

Nested Tab Generation on the Fly

Tips for steering clear of getting caught in the initial focus trap

Getting the value of a JSON object in CodeIgniter can be easily achieved by using the appropriate

retrieving data entered in an HTML form using PHP script

Is there a way for my app to ask for Facebook permissions when the like button is clicked?

Receiving a Javascript Promise from a $.ajax request