Padding is not working for image component in extJS4

1
votes

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:

enter image description here

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

enter image description here

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.

2
extjsextjs4extjs3

2 Answers

1
votes

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.

0
votes

Near as I can tell, this isn't working in ExtJS 4.1 either. One solution that works for me is to use the padding config property:

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

Would love to hear from anyone with a better solution.