1. #1
    Sencha User
    Join Date
    Dec 2007
    Location
    Aubagne, France
    Posts
    347
    Vote Rating
    1
    mask_hot is on a distinguished road

      1  

    Default Panel Background image

    Panel Background image


    Hello,

    I try to display a background image in a panel like this :

    Code:
    var p = new Ext.Panel({
            title: 'My Panel',
            collapsible:true,
            renderTo: 'container',
    		bodyStyle: "background-image:url(ext/resources/images/soccer_field.jpg) !important",
            height:768,                    
            width:1024,
            html: Ext.example.bogusMarkup
        });
    but my background is still white and my picture not displayed..

    My jpg is 30ko and 768*1024px.
    Is it to heavy?
    Do I miss something?

    thx a lot

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Is this in IE?

  3. #3
    Sencha User
    Join Date
    Dec 2007
    Location
    Aubagne, France
    Posts
    347
    Vote Rating
    1
    mask_hot is on a distinguished road

      0  

    Default


    nope, FF 2.0.0.14

    in firebug, the css seems good when I inspect the panel


    Code:
    <div id="ext-gen8" class="x-panel-bwrap">
    <div id="ext-gen9" class="x-panel-body" style="background-image: url(ext/resources/images/soccer_field.jpg); width: 1022px; height: 741px;">
    <p>
    </p>
    </div>
    </div>

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    And when you show the style pane, and hover the mouse over the url, does it show the image or the loading spinner?

    Basically, is that path correct?

  5. #5
    Sencha User
    Join Date
    Dec 2007
    Location
    Aubagne, France
    Posts
    347
    Vote Rating
    1
    mask_hot is on a distinguished road

      0  

    Default


    I've got the loading spinner, so I guess the path is wrong?

    Here is my directory structure

    Code:
    ./ext
    ./js
    ./images
    myhtmlfile.html
    my javascript file is in the js directory

    Should my path in my javascript file be (if I put my jpg in ./images)
    images/myjpg.jpg or ../images/myjpg.jpg?

  6. #6
    Sencha User
    Join Date
    Dec 2007
    Location
    Aubagne, France
    Posts
    347
    Vote Rating
    1
    mask_hot is on a distinguished road

      0  

    Default Eureka!

    Eureka!


    I found what it was!

    just a f*ing permission issue... just needed a chmod +r on my jpg file and it works!

    How do I mark this thread as resolved now?


  7. #7
    Sencha User
    Join Date
    Dec 2007
    Location
    Aubagne, France
    Posts
    347
    Vote Rating
    1
    mask_hot is on a distinguished road

      0  

    Default


    Is it possible to adapt size of the background image?

    My bkgImg is 768*1024 and for example, my Panel is just 384*512.. Do I have to resize my bkgImg or can it be done "on the fly"?

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You have to do it on the server. No way of doing anything to a background image.

  9. #9
    Sencha User
    Join Date
    Dec 2007
    Location
    Aubagne, France
    Posts
    347
    Vote Rating
    1
    mask_hot is on a distinguished road

      0  

    Default


    ok, so I fixed the size and resize the image.

    thx

  10. #10
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    4
    Vote Rating
    0
    Yury Kazakov is on a distinguished road

      0  

    Post background-image for columnchart

    background-image for columnchart


    Similar problem with bar charts: "how we can set backgroun image".

    new Ext.Panel({
    width: 700,
    height: 400,
    renderTo: 'bars',
    bodyStyle: "background-image:url(img/world_jp.png) !important",
    items: {
    xtype: 'columnchart',
    store: bar_store,
    yField: 'count',
    xField: 'date',
    extraStyle: {
    xAxis: {
    labelRotation: -90
    }
    }
    }
    });

    It looks like charts ignore bodyStyle, the background is white.
    Tried the following, also doesn't help:

    <style type="text/css">
    #bars .x-panel-body {
    background-image: url(img/world_jp.png) !important
    }
    </style>

    Any help is apprecated.

    Sincerely,
    Yury.