1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    4
    Vote Rating
    0
    chikuo is on a distinguished road

      0  

    Default Answered: How to make a Ext.Img frame show up

    Answered: How to make a Ext.Img frame show up


    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

  2. 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.:

    Code:
    {
       xtype: 'image',
       cls: 'my-img',
       ...
    }
    Code:
    .my-img {
        border: 1px solid black;
    }

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,489
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      1  

    Default


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

  4. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    4
    Vote Rating
    0
    chikuo is on a distinguished road

      0  

    Default Image of PNG file with frame

    Image of PNG file with frame


    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.
    Attached Images

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,489
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      1  

    Default


    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.:

    Code:
    {
       xtype: 'image',
       cls: 'my-img',
       ...
    }
    Code:
    .my-img {
        border: 1px solid black;
    }

  6. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    4
    Vote Rating
    0
    chikuo is on a distinguished road

      0  

    Default Image with border

    Image with border


    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

Thread Participants: 1

Tags for this Thread