填充不适用于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，但问题是padding直接应用于该组件，因此组件仍将具有150宽度有或没有填充，

我建议你将组件放在面板中你想要的尺寸，然后将填充物添加到该面板中。之后，将新创建的面板添加到所需的面板，它将创建更多组件，但它将为您提供所需的外观

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

这适合我。

Answer 2

我可以说，这在ExtJS 4.1中也不起作用。一个适合我的解决方案是使用padding配置属性：

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

很想听到任何人提供更好的解决方案。