Search code examples
buttonextjsbookmarksfavorites

Favorite/star/bookmark toggle button in Extjs

How can I have toggle star-shaped button in Extjs, so when the state is 'pressed' it appears like a filled star, and otherwise like an outlined star?

For example, like the star that appears in Google chrome address bar to bookmark the page:

enter image description here

and when it is clicked it changes it appearance to enter image description here

or it could be a heart enter image description here that changes to

enter image description here

Or in gmail enter image description here

Solution

  • enter image description here

    For panel header:

    Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sample Panel',
            tools: [{
                glyph: 'xf005@FontAwesome',
                pressed: false,
                callback: function () {
                    if (this.pressed) {
                        this.setGlyph('xf005@FontAwesome'); // star
                    } else {
                        this.setGlyph('xf006@FontAwesome'); // star-o
                    }
                    this.pressed = !this.pressed;
                }
            }],
            renderTo: Ext.getBody()
        });
    }
});

    And the font awesome style for index.html

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">