I created a right click menu that permit to change the background image of a panel.

The way i primarly used is to declare the panel with its bodystyle depending of the value of a constant (BCKGRND_IMAGE).

When you click on the menu button it :

  1. create a new instance of this panel
  2. change its bodystyle
  3. remove the initial panel and add the new one.
It works very well and give a good user experience. But...
I would like to do that without creating a new instance of the panel.

Here is the entire code :
Code:
Ext.define('MainApp.view.panel.HomePanel', {
    extend: 'Ext.panel.Panel',
    requires: [
        'MainApp.view.panel.UploadPanel'
    ],
    layout:{
        type:'hbox',
        align: 'middle'
    },
    
    //BCKGRND_IMAGE is a constant initially set to 1
    bodyStyle: "background-image:url(app/images/"+BCKGRND_IMAGE+".jpg); background-repeat:no-repeat; background-position:center center;-moz-background-size: cover; -webkit-background-size: cover;-o-background-size: cover;background-size: cover;",
    opacity:0,
    border:0,
    alias : 'widget.homepanel',
    id    : 'homepanel',
    
    
    initComponent: function() {
        var me = this;
        var HomeButtons = Ext.create('Ext.panel.Panel', {
            id : 'homebuttons',
            flex:1,
            bodyStyle: "background-color: transparent;",
            border: 0,
            layout:{
                type:'hbox',
                //align: 'middle',
                pack: 'center'
            },
            defaults : {
                margins : 70
            },
            items: [{
                flex:1,
                xtype: 'buttonupload',
                //margins : 20
            },{
                flex:1,
                xtype: 'buttonwater',
                margins: '70 30 70 100'
            },{
                flex:1,
                xtype: 'buttonbt'
            },{
                flex:1,
                xtype: 'buttonmt'
            }]            
        });
        me.items=[HomeButtons];
        
        homepanelcontextMenu = new Ext.menu.Menu({
              width: 160,
              items: [{
                    text: 'Changer le fond d\'&eacutecran',
                    iconCls: 'edit',
                    width : 160,
                    
                    handler: function(){
//Here is changed the BCKGRND_IMAGE value. I have 11 pictures //called 1.jpg; 2.jpg; 3.jpg ...

BCKGRND_IMAGE=BCKGRND_IMAGE+1;

                        if (BCKGRND_IMAGE>11){
                            BCKGRND_IMAGE=1;
                        }
                        
                        
                        //Reload the home panel
        
                        var homepanel= Ext.widget('homepanel');
                        homepanel.bodyStyle="background-image:url(app/images/"+BCKGRND_IMAGE+".jpg); background-repeat:no-repeat; background-position:center center;-moz-background-size: cover; -webkit-background-size: cover;-o-background-size: cover;background-size: cover;";
                        homepanel.removeAll(false);
        
                        homebuttons=Ext.getCmp('homebuttons');
                        homepanel.add(homebuttons);
        
                        Ext.getCmp('centerregion').removeAll(); //clean the center region
                        
                        Ext.getCmp('centerregion').add(homepanel);
        
                        homepanel.animate({
                               duration: 1000,
                               easing: 'backIn',
                            from: {
                                opacity: 0
                            },
                            to: {
                                opacity: 1
                            }
                        }); 
                    }
              }]
        });
        //listener to reight click event
this.on('render',function() {

            Ext.getCmp('homepanel').getEl().on('contextmenu', function(e) {
                 e.preventDefault();
                 homepanelcontextMenu.showAt(e.getXY());
            });
        });
        
        me.callParent(arguments);
    }
});
i repeat that this code works well (hope it will help some) but it has the desadventage to create a new instance of the homepanel. I would like to change the bodystyle without creating the new instance.
Then I would like to change the bodystyle of other panel, accessing them with their id (something like Ext.getCmp('mypanel_id').bodystyle='...'

Thanks for your help!