Aplicación de un efecto de desplazamiento a un contenedor en ExtJs

Question

¿Por qué es tan difícil? No puedo usar CSS o ya habría terminado con esto. Tengo un 'botón' compuesto por un contenedor, una imagen y una etiqueta, y obtuve el evento click funcionando bien para el contenedor. Sin embargo, hacer algo tan simple como cambiar el color de fondo en hover me tiene odiando ExtJs en este momento, TIENE que haber una manera más simple de hacer esto.

Esto es lo que tengo hasta ahora:

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" } 
        } 
       ] 
       }) 

Las alertas son los llamados pero no se está aplicando el estilo. ¿Hay una forma más limpia de hacer algo tan simple? O ¿hay un mejor control para usar en esta situación que puede lograr los mismos resultados?

Answer 1

Es una pena que no puedas usar CSS. Si pudiera, entonces overCls sería el camino a seguir: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

Al margen de eso, su enfoque es bastante cercano. Aplicar el objeto de estilo en el el no hará nada, ya que Ext no tiene idea de que lo hayas hecho. En lugar al que desea llamar o setStyleapplyStyles

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

Creo que los comportamientos que usted está buscando es capturado en

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