ExtJS - How to highlight dom element permanently?

Question

I want to highlight a dom element permanently using Ext JS.

Here is the common usage of Ext.dom.Element.highlight function:

field.getEl().highlight('#fbac3d', {
    attr: "backgroundColor",
    endColor: "#ffffff",
    easing: 'easeIn',
    duration: 4000
});

Easing is ok but I want the it to be ended with the endColor.

Answer 1

You can have afteranimate listener event and set the backgroundColor.

field.getEl().highlight('#fbac3d', {
attr: "backgroundColor",
endColor: "#ffffff",
easing: 'easeIn',
duration: 4000,
listerners: {
    afteranimate: function() {
      // here you can set style attributes to your field
    }
}
});

or, you can override the highlight method, if you want to make this functionality universe.

Ext.dom.Element.override({
        highlight: function(color, o) {
        var me = this,
            dom = me.dom,
            from = {},
            restore, to, attr, lns, event, fn;

        o = o || {};
        lns = o.listeners || {};
        attr = o.attr || 'backgroundColor';
        from[attr] = color || 'ffff9c';

        if (!o.to) {
            to = {};
            to[attr] = o.endColor || me.getColor(attr, 'ffffff', '');
        }
        else {
            to = o.to;
        }

        // Don't apply directly on lns, since we reference it in our own callbacks below
        o.listeners = Ext.apply(Ext.apply({}, lns), {
            beforeanimate: function() {
                restore = dom.style[attr];
                var el = Ext.fly(dom, '_anim');
                el.clearOpacity();
                el.show();

                event = lns.beforeanimate;
                if (event) {
                    fn = event.fn || event;
                    return fn.apply(event.scope || lns.scope || WIN, arguments);
                }
            },
            afteranimate: function() {
                //Commented this , here it restores background color
                //if (dom) {
                //    dom.style[attr] = restore;
                //}

                event = lns.afteranimate;
                if (event) {
                    fn = event.fn || event;
                    fn.apply(event.scope || lns.scope || WIN, arguments);
                }
            }
        });

        me.animate(Ext.apply({}, o, {
            duration: 1000,
            easing: 'ease-in',
            from: from,
            to: to
        }));
        return me;
        }
    });

Example Fiddle: https://fiddle.sencha.com/#fiddle/11mo