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,501
    Vote Rating
    47
    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,501
    Vote Rating
    47
    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,501
    Vote Rating
    47
    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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi