title: How to change background of hovered and pressed extjs-button dynamically
body: <p>Hy there,</p>
  
  <p>i need the ability to change the background-color for the different states (normal, hover, pressed) of a button dynamically.</p>
  
  <p>What i've came up with so far is the following:
  <a href="http://jsfiddle.net/suamikim/c3eHh/" rel="nofollow">http://jsfiddle.net/suamikim/c3eHh/</a>
  </p>
  
  <pre><code>Ext.onReady(function() {
      function updateBackground() {
          var theWin = win || this, // neccessary because of the call from the afterrender-event
              btn = theWin.down('#btnTest'),
              bckgr = theWin.down('#btnBckgr').getValue(),
              bckgrHover = theWin.down('#btnBckgrHover').getValue(),
              bckgrPressed = theWin.down('#btnBckgrPressed').getValue();
  
          // Set normal background as button-style
          // Should be ok
          $('#' + btn.id).css('background', bckgr);
  
          // Toggle background when hover-state changes
          // Are there any downsides if this function gets called everytime the updateBackground-method is called? Do i have to dispose anything before binding the functions again?
          $('#' + btn.id).hover(function() {
                  $('#' + btn.id).css('background', bckgrHover);
              }, function() {
                  $('#' + btn.id).css('background', bckgr);
              }
          );
  
          // Set the background for pressed button as document style
          // Problems:
          //     - Pollutes the document-header if called multiple times...
          //     - Background does not change anymore on hover for pressed button because of the !important, but without important it wouldn't show the pressed background at all...
          $('&lt;style type="text/css"&gt; #' + btn.id + '.x-btn-pressed { background: ' + bckgrPressed + ' !important } &lt;/style&gt;').appendTo('head');
      };
  
      // Create a window with the propertygrid
      var win = Ext.create('Ext.window.Window', {
          width: 800,
          height: 200,
          layout: 'fit',
  
          tbar: {
              defaultType: 'textfield',
              defaults: {
                  listeners: {
                      blur: updateBackground
                  }
              },
              items: [
                  'Background (CSS):', { itemId: 'btnBckgr', value: '#77ABD8' },
                  'Background hover (CSS):', { itemId: 'btnBckgrHover', value: '#CC1C1C' },
                  'Background pressed (CSS):', { itemId: 'btnBckgrPressed', value: '#7D4FC6' }
              ]
          },
  
          items: [{
              xtype: 'button',
              itemId: 'btnTest',
              text: 'test button',
              enableToggle: true
          }],
  
          listeners: {
              'afterrender': updateBackground
          }
      }).show();
  });
  </code></pre>
  
  <p>This works basically but there are some questions left to me:</p>
  
  <h3>1)</h3>
  
  <p>Is it ok to call the hover-function of jquery everytime the updateBackground-method is called?<br><br>
  According to the jquery-doc (<a href="http://api.jquery.com/hover/" rel="nofollow">http://api.jquery.com/hover/</a>) this functions binds the 2 given functions to the mouse-enter- &amp; mouse-leave-events of the given element.<br><br>
  Does this mean that it binds new functions everytime i call it or does it update the already bound ones or does it dispose the already bound ones automatically before binding the new ones...<br><br>
  In short: do i have to dispose anything before binding the new functions with $.hover?</p>
  
  <h3>2)</h3>
  
  <p>I set the style for the pressed state as document-style which means that the document-header gets polluted if the updateBackground-function is called often (everytime one of the text-fields fires the blur-event in my test-case).<br><br></p>
  
  <p>Is there any better way to achieve the same goal or can i remove the already set styles before adding new ones?</p>
  
  <h3>3)</h3>
  
  <p>The background for hover-state doesn't appear if the button is pressed because of the !important-flag in the pressed-style. I can't just remove this flag because the background of the pressed-state wouldn't show correctely without it...
  Any solutions?<br><br></p>
  
  <p>In general i'd be open for every suggestion on how to solve this problem in a completely different way.</p>
  
  <p>Thanks,</p>
  
  <p>mik</p>
  
  <p><hr></p>
  
  <h3>Edit:</h3>
  
  <p>The code above is just an example. Actually i need to be able to change the background-attribute for other ext-controls than buttons too (panels, checkboxes, ...) but i think that i can adopt a working solution for buttons to those other controls myself.<br><br></p>
  
  <p>Please keep this in mind and don't specify the answer too much on buttons. It should be as generic as possible...</p>