How to set highlight duration permanently

Question

I want to set the duration time of the Ext.get(el).highlight() function permanently. Is this possible without using cls? I have already tried to give infinity to the duration config. However I receive many errors by doing that.

Answer 1

You need to override function highlight. There is constant 1000ms.

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

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

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

            // Don't apply directly on lns, since we reference it in our own callbacks below
            options.listeners = Ext.apply(Ext.apply({}, lns), {
                beforeanimate: function() {
                    // Reattach to the DOM in case the caller animated a Fly
                    // in which case the dom reference will have changed by now.
                    animFly.attach(dom);

                    restore = dom.style[attr];
                    animFly.clearOpacity();
                    animFly.show();

                    event = lns.beforeanimate;

                    if (event) {
                        fn = event.fn || event;

                        return fn.apply(event.scope || lns.scope || WIN, arguments);
                    }
                },
                afteranimate: function() {
                    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({}, options, {
                duration: 10000, // here new duration ms
                easing: 'ease-in',
                from: from,
                to: to
            }));

            return me;
        }
});

Or you can attach config to highlight method like :

Ext.get(el).highlight("#ffff9c", {
    attr: "backgroundColor",
    endColor: "#ffffff",
    easing: 'easeIn',
    duration: 4000
});