PDA

View Full Version : How to make a Ext.Img frame show up



chikuo
26 Dec 2012, 6:16 PM
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
27 Dec 2012, 11:22 AM
Why are you trying to frame an image? What are you actually trying to achieve?

chikuo
27 Dec 2012, 1:03 PM
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
27 Dec 2012, 9:53 PM
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/#!/api/Ext.AbstractComponent-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
31 Dec 2012, 12:09 PM
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