title: Padding is not working for image component in extJS4
body: <p>As we know that ExtJS4 is new,we will get stuck with some problems even if it is small,but we need to get the solution to complete the upgradation.We are trying to apply padding to the image component but it is not working.</p>
  
  <p>ExtJS4 code is:</p>
  
  <pre><code>Ext.onReady(function(){
              Ext.QuickTips.init()        
              var image = {
              xtype : 'image',
              src : 'images.jpg',
              height : 40,
              width : 150,
              border : true,
              style : 'padding-left:60px',
              resizable : false   
              };      
              var pan = Ext.create('Ext.panel.Panel',{
              width : 400,
              height : 400,
              id : 'expan',
              border : true,
              title : 'Ex Panel',
              items : [image],
              renderTo : Ext.Body()
              });
          });
  </code></pre>
  
  <p>If we remove padding then the image looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/uaZ97.png" alt="enter image description here"></p>
  
  <p>But If we apply padding then the image size is decreasing and it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/CDguA.png" alt="enter image description here"></p>
  
  <p>1.Why this is happening?<br>
  2.Is there any way to move this image to center of the panel?</p>
  
  <p>If anyone knows the path to get out from this.Please help me.</p>