CODEWITHSUNDEEP
coding-stylebackground-imagesencha-touch
headkit
headkit

Reputation: 3327

sencha touch :: adding a background-image to a Panel

I try to add an image to the background of a panel. the image comes from loaded data. i tried the following code, which did not work:

var topPanel = new Ext.Panel({
        flex:1,
        title:'topPanel',
        style:'style="background-image: url('+this.jsonData.picURL+');'

});

when I create a list it work great with 'itemTpl'.

I also tried 

style:'background-image: url({picURL});'

together with

store: {
            fields: ['firstName','lastName', 'picURL'],
            data: this.jsondData
        }

but then I get the message

[[object Object]] is not a valid argument for 'Function.prototype.apply'.

any thoughts could help! thnx

Upvotes: 1

Views: 11885

Answers (2)

jeffyt
jeffyt

Reputation: 151

and if you want to cover the whole background use:

backgroundSize: 'cover'

Upvotes: 3

Yevhen
Yevhen

Reputation: 186

You can append custom style by assigning object to style property of your panel

style: {
            backgroundImage: 'url(resources/branding/mobile.gif)',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center'
}

Upvotes: 5

Related Questions