extJS4の画像コンポーネントで埋め込みが機能していない

Question

ExtJS4が新しいことがわかっているので、小さなものでも問題は発生しませんが、アップグレードを完了するために解決策を得る必要があります。画像コンポーネントへのパディングは機能していません。

ExtJS4コードは次のとおりです。

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() 
      }); 
     }); 

我々はパディングを削除した場合、イメージは次のようになります。

しかし、我々はパディングを適用する場合は、画像サイズが減少していると、それは次のようになります。

1.なぜこのようなことが起こっていますか？
2.この画像をパネルの中央に移動する方法はありますか？

誰かがこれから出て行く道を知っているなら、私に手伝ってください。

Answer 1

私はあなたがxtypeを見つけられないように見えるので、私はいくつかのユーザー拡張コンポーネントイメージを使用していると推測していますが、パディングはそのコンポーネントに直接適用され、コンポーネントにはまだ150あなたが望むサイズのパネルの中にコンポーネントを置き、そのパネルにパディングを追加することをお勧めします。それが目的のパネルに、新しく作成されたパネルを追加した後、それはより多くのコンポーネントを作成しますが、それはこれが私の作品

{ 
       xtype:'panel', 
       style : 'padding-left:60px', 
       width: 210, 
       items:[image] 
} 

あなたの目的の外観を与えます。

Answer 2

私が知る限り、これはExtJS 4.1でも動作していません。私のために働く1つの解決策は、padding設定プロパティを使用することです：

{ 
xtype : 'image', 
src : 'resources/images/Logo.png', 
padding : '15px 5px 15px 15px' 
} 

もっと良い解決策を誰かから聞いてみたいと思います。