將懸停效果應用於ExtJs中的容器

Question

爲什麼這很難？我無法使用CSS，或者我已經完成了。我有一個由一個容器，一個圖像和一個標籤組成的「按鈕」，並且我得到了適用於容器的click事件。然而 - 做一些簡單的事情就像改變懸停時的背景顏色一樣，現在我恨ExtJs，那麼做一個更簡單的方法。

這是我到目前爲止有：

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

發出的警報稱爲，但沒有被應用該樣式。有沒有更簡單的方法做一些簡單的事情？或者在這種情況下有更好的控制可以達到相同的結果。

Answer 1

這是一個恥辱，你不能使用CSS。如果可以的話，那麼overCls將是要走的路：http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

除了這個，你的方法非常接近。將樣式對象應用於el將不會執行任何操作，因爲Ext不知道您已經這樣做了。相反，你要撥打setStyle或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

我認爲你正在尋找

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