How to make a Ext.Img frame show up

[chikuo]

Hi,

I need to show the Ext.Img frame but the frame never shows up even t the 'frame' property is set to 'true'. The image is a 16x16 png.

Is there anything I need to set? The following is my code.

{
xtype: 'image',
columnWidth: 0.2,
autoRender: false,
frame: true,
itemId: 'My_IMAGE',
margin: '20 15 15 15',
maxHeight: 16,
maxWidth: 16,
minHeight: 16,
minWidth: 16,
src: 'images/PURCH.png'
}
Thanks a lot for help.


CK

[skirtle]

Why are you trying to frame an image? What are you actually trying to achieve?

[chikuo]

Thanks for reply. Please see the attached image that the left side image has a frame but the right one did not have. Is it possible to get the frame without changing the PNG file? I tried to set both 'border' and 'frame' but do not work.

Thanks a lot.

[skirtle]

The frame setting is for putting rounded corners on components, working in conjunction with a SASS mixin:

http://docs.sencha.com/ext-js/4-1/#!...nent-cfg-frame

It looks like what you want is a border. For that it's probably best just to use CSS. e.g.:

{
   xtype: 'image',
   cls: 'my-img',
   ...
}

.my-img {
    border: 1px solid black;
}

[chikuo]

Hi,

Thanks for reply. I use your CSS code into 'style' to make the image has a border cuccessfully:

{
xtype: 'image',
columnWidth: 0.1,
itemId: 'My_IMAGE',
margin: '10 0 0 10',
maxHeight: 20,
maxWidth: 20,
minHeight: 20,
minWidth: 20,
style: 'border: 1px solid black;',
src: 'images/my_image.png'
}

Thanks again for great help.

CK