Question

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.

ExtJS4 code is:

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

If we remove padding then the image looks like:

But If we apply padding then the image size is decreasing and it looks like:

1.Why this is happening?
2.Is there any way to move this image to center of the panel?

If anyone knows the path to get out from this.Please help me.

Answer 1

Ok for start i’m guessing you are using some user extended component image, because i cannot seem to find that xtype, But the issue is that the padding is applied directly to that component so the component will still have the 150 width with or without padding,

I suggest you put the component inside a panel the size you want and add the padding to that pannel. After that add the newly created panel to the desired panel, It will create more components but it will give you the desired look

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

This works for me.