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!