ExtJS - Как выделить элемент dom постоянно?

Question

Я хочу выделить элемент dom постоянно используя Ext JS.

Здесь общее использование Ext.dom.Element.highlight функции:

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

Easing в порядке, но я хочу, чтобы это не закончилось endColor.

Answer 1

У вас может быть событие afteranimate listener и установить 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 
    } 
} 
}); 

или вы можете переопределить метод выделения, если хотите сделать эту функциональность юниверсом.

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