title: how to use pressedcls to change the background image of button in extjs4?
body: <p>I made a toggle button group using extjs4.
  When I press one button, the other buttons change to unpressed. 
  Then I want to change the background image of the button after pressed. 
  So I use "pressedCls". 
  The code:</p>
  
  <pre><code>Ext.define('Crm.view.CrmNavi', {
      extend: 'Ext.toolbar.Toolbar',
      height: 27,
  
      initComponent: function() {
          var me = this;
  
          Ext.applyIf(me, {
              items: [
                  {
                      cls: 'navi_btn',
                      overCls: 'navi_btn_over',
                      pressedCls: 'navi_btn_pressed',
                      xtype: 'button',
                      height: 24,
                      flex: 4,
                      html: 'button one'
                      toggleGroup: 'crmNaviBtnGroup',
                      enableToggle: true,
                      pressed: true
                  },
                  {
                      cls: 'navi_btn',
                      overCls: 'navi_btn_over',
                      pressedCls: 'navi_btn_pressed',
                      xtype: 'button',
                      height: 24,
                      flex: 4,
                      margin: '0 0 0 0',
                      html: 'button two',
                      toggleGroup: 'crmNaviBtnGroup',
                      enableToggle: true
                   }
              ]
          });
      }
  });
  
  //-----------------------------------------------------------
  .navi_btn{
      font-family: MicroSoft YaHei;
      font-weight: 5;
      font-size: 15px;
      text-align: center;
      color: #006f61; 
  }
  .navi_btn_over{
      font-family: MicroSoft YaHei;
      font-weight: 3;
      font-size: 15px;
      text-align: center;
      color: #ffffff;
      background-image: url("images/crmNaviBtnPressed_bg.png");
      background-repeat: repeat-x;
  }
  .x-navi_btn_pressed{
      font-family: MicroSoft YaHei;
      font-weight: 3;
      font-size: 15px;
      text-align: center;
      color: #ffffff;
      background-image: url("images/crmNaviBtnPressed_bg.png");
      background-repeat: repeat-x;
  }
  </code></pre>
  
  <p>//------------------------------------------------------------------</p>
  
  <p>It works well on google chrome.
  But on IE8, the background image settings does not work(the font settings works well). 
  So, is there any settings can solve this problem? </p>