Question

I’m a beginner in sencha touch, so I’m having some basic questions.

I have added a background image to a panel in css:

#inputPanel{
    background:url(../i/input-bg.png) no-repeat left top;
}

Every time the panel is shown, I want to change the background image:

this.inputPanel = new Ext.form.FormPanel({
    cls:'panel',
    id:'inputPanel',
    items:[],
    dockedItems:[],
    listeners:{
        beforeshow:function(){
            if(showImageAAA)
              // Change the background image to AAA
            else
              // Change the background image to BBB
        },
    }
});

Is there any easy way to do it? Thanks.

Answer 1

you can do below

this.inputPanel = new Ext.form.FormPanel({
    cls:'panel',
    id:'inputPanel',
    items:[],
    dockedItems:[],
    listeners:{
        beforerender:function(){
            if(showImageAAA)
              // Change the background image to AAA
               this.style="background:url(../i/input-bgAAA.png) no-repeat left top;";
            else
              // Change the background image to BBB
               this.style="background:url(../i/input-bgBBB.png) no-repeat left top;";
        },
    }
});

Hope this help!