Applicazione di un effetto di passaggio del mouse su un contenitore negli ExtJ

Question

Perché è così difficile? Non posso usare i CSS o lo farei già. Ho un 'pulsante' composto da un contenitore, un'immagine e un'etichetta, e ho ottenuto l'evento click funzionante per il contenitore. Tuttavia, fare qualcosa di semplice come cambiare il colore di sfondo al passaggio del mouse mi fa odiare gli ExtJ in questo momento, deve essere un modo più semplice per farlo.

Questo è quello che ho finora:

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

le segnalazioni sono chiamati, ma non viene applicato lo stile. C'è un modo più pulito di fare qualcosa di così semplice? O c'è un controllo migliore da usare in questa situazione che può raggiungere gli stessi risultati.

Answer 1

È un peccato non poter usare i CSS. Se potessi, allora la strada da percorrere è overCls: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

A parte questo, il tuo approccio è piuttosto vicino. Applicare l'oggetto stile al non farà nulla, poiché Ext non ha idea di averlo fatto. Invece si desidera chiamare 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

Penso che i comportamenti che si sta cercando è catturato in

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