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 fo开发者_JAVA技巧llowing 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

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'
}

and if you want to cover the whole background use:

backgroundSize: 'cover'