Stosowanie efektu hover do kontenera w ExtJs

Question

Dlaczego to takie trudne? Nie mogę używać CSS lub już bym z tym skończył. Mam "przycisk" składający się z pojemnika, obrazu i etykiety, a wydarzenie click działa dobrze dla kontenera. Jednakże - robienie czegoś tak prostego, jak zmiana koloru tła na hover, sprawia, że ​​teraz nienawidzę ExtJs, więc musi to być prostszy sposób na zrobienie tego.

To, co mam do tej pory:

Ext.create('Ext.container.Container', { 
       layout: 'hbox', 
       style: { backgroundColor: '#ddd', margin: "5px 0px 5px 5px", padding: "3px", width: "150px", fontSize: "8pt" }, 
       listeners: { 
        render: function (c) { 
         c.el.on('click', function() { alert('Downloading Report'); }); 

         c.el.on('mouseover', function() { 
          //alert("mouseover"); 
          Ext.apply(this, { style: { backgroundColor: '#aaa'} }); 
         } 
         ); 

         c.el.on('mouseout', function() { 
          //alert("mouseout"); 
          Ext.apply(this, { style: { backgroundColor: '#ddd'} }); 
         } 
         ); 
        }, 
        scope: this 
       }, 
       items: [ 
        { xtype: 'image', src: "resources/images/icons/monoDownload32.png", style: { margin: "2px", maxWidth: "32px"} }, 
        { 
         xtype: 'label', 
         text: 'MS Excel Report', 
         style: { margin: "2px", fontSize: "8pt" } 
        } 
       ] 
       }) 

Alarmy są nazywane ale styl nie jest stosowana. Czy istnieje czystszy sposób robienia czegoś tak prostego? LUB czy istnieje lepsza kontrola do wykorzystania w tej sytuacji, która może osiągnąć takie same wyniki.

Answer 1

Szkoda, że ​​nie można używać CSS. Gdybyś mógł, to overCls byłby drogą: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

Porzucając to, twoje podejście jest bliskie. Zastosowanie obiektu stylu na el nie spowoduje niczego, ponieważ Ext ​​nie ma pojęcia, że ​​to zrobiłeś. Zamiast chcesz zadzwonić setStyle lub applyStyles

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-applyStyles

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-setStyle

Answer 2

myślę zachowań, które szukasz ujęte w

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.view.View