title: How to change image on panel when doing a mouseover - ExtJs?
body: <p>I'm trying to change the image of <strong>each panel</strong> when doing a <strong>mouseOver</strong> and <strong>mouseLeave</strong>. </p>
  
  <p>If I do <strong>mouseover</strong> on a panel (image), this image should be replaced by a new one (any image). For example the first panel that has the <strong>HTML5</strong> image should change to a new image, and if I do a <strong>mouseleave</strong> the HTML5 image should <strong>show up again</strong>. Any ideas on how to accomplish this? Thanks a lot in advance.</p>
  
  <p>Here's the working code: <a href="http://jsfiddle.net/henryDev/b67vu4Lk/3/" rel="nofollow noreferrer"><strong>FIDDLE</strong></a></p>
  
  <pre><code>    layout: {
      type: 'accordion',
      titleCollapse: false
       },
       items: [{
      title: '&lt;i class="fa fa-html5" style="font-size:50px;color:black;" id="developmentIcon"&gt;&lt;/i&gt;',
       xtype: 'panel-details'
       },{
       title: '&lt;i  class="fa fa-wrench" style="font-size:50px;color:black;" id="developmentIcon"&gt;&lt;/i&gt;',
      xtype: 'panel-details'
      }
       ....
       .....
  </code></pre>
  
  <p>NOTE:
  I'm just using <strong>font awesome</strong> images for simplicity, but they can be any type of image such as .png, .svg, etc</p>