ExtJS - 如何永久突出显示 dom 元素？

Question

我想使用 Ext JS永久突出显示一个 dom 元素。

这里是Ext.dom.Element.highlight函数的常用用法：

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

Easing 可以，但我希望它以endColor 结束。

Answer 1

您可以拥有 afteranimate 侦听器事件并设置背景颜色。

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

或者，如果你想创建这个功能，你可以覆盖 highlight 方法。

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;
        }
    });

小提琴示例：https://fiddle.sencha.com/#fiddle/11mo