Results 1 to 10 of 10

Thread: displaying image in panel

  1. #1
    TheMonolith
    Guest

    Default displaying image in panel

    What is the easiest/best way to display an image in a panel?

    I tried the following code but no image is displayed. I use Firefox 3.6 and Firebug doesn't complain about anything:

    Code:
        var previewPanel = new Ext.Panel({
            title: 'Preview',
            iconCls: 'magnifierIcon',
            width: 400,
            height: 600,
            bodyStyle: "background-image: url(apple-mac.jpg) !important",
            x: 50,
            y: 50
            });
    Your help is greatly appreciated!

  2. #2
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    Are you sure that the path to the background-image is correct? I tested something similiar with the \examples\panel\panels.js example and it worked fine.

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Debug with Firebug. It will show a 404 in the net tab, and also, hovering over the image url in the style pane shows a spinner if the image can't be loaded.

    Really, you should be able to work things out.

  4. #4
    TheMonolith
    Guest

    Default

    @ fay

    The path to the background image is definitely set correctly. The image is in the same directory as the script. I also checked the spelling for the third time and it is also correct.

    @ Animal

    As I said, Firebug doesn't show an error when executing the script. I also opened the HTML pane on the left and then the Style pane on the right and clicked on the :hover command but it did nothing.

    Is there another way to find the problem with Firebug?

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Is the style applied to the Panel body?

    Check in Firebug. If so, hover hover the URL to see if the image is loaded. It's simple.

  6. #6
    TheMonolith
    Guest

    Default

    It seems like the style has not been applied:

    HTML Code:
    <div class="x-panel-bwrap" id="ext-gen16"><div class="x-panel-body" id="ext-gen17" style="width: 398px; height: 572px;"></div></div>
    But why?

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    I don't think it likes "!important"

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Which makes sense. It't not applicable to inline style. It's a modifier on cascading stylesheet rules.

  9. #9
    TheMonolith
    Guest

    Default

    It works when I remove "!important". However, the image is vertically repeated. If I add "no-repeat", then no image at all is displayed.

    Is it because the "no-repeat" (like "!important") is not applicable to inline styles?
    And, even more important, how can I find out which styles are applicable to inline styles?

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    That would be background style!

    Read the CSS standard!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •