Comment puis-je accéder à d'autres objets extJS à partir d'événements de clic extJS?

Question

Dans le code ci-dessous dans l'événement click pour mon objet menuItem1, comment puis-je modifier le contenu html de l'objet renderContent de sorte que lorsque l'utilisateur clique sur l'en-tête de l'élément de menu, le contenu au milieu de la page change?

(Dans tous les exemples que je regarde, les événements de clic créent de nouveaux objets, mais ne change pas les objets existants.)

Ext.onReady(function(){ 

    var menuItem1 = new Ext.Panel({ 
     id: 'panelStart', 
     title: 'Start', 
     html: 'This is the start menu item.', 
     cls:'menuItem' 
    }); 

    var menuItem2 = new Ext.Panel({ 
     id: 'panelApplication', 
     title: 'Application', 
     html: 'this is the application page', 
     cls:'menuItem' 
    }); 

    var regionMenu = new Ext.Panel({ 
     region:'west', 
     split:true, 
     width: 210, 
     layout:'accordion', 
     layoutConfig:{ 
      animate:true 
     }, 
     items: [ menuItem1, menuItem2 ] 
    }); 

    var regionContent = new Ext.Panel({ 
     region: 'center', 
     padding:'10', 
     autoScroll: true, 
     html: 'this is the content' 
    }); 

    new Ext.Viewport({ 
     layout: 'border', 
     items: [ regionMenu, regionContent ] 
    }); 

    menuItem1.header.on('click', function() { 
     alert('this appears in alert window'); 
    // regionContent.set('html', 'new text'); //nothing appears, no error 
    // regionContent.set('html', 'new text'); //nothing appears, no error 
    // Ext.get('regionContent').html = 'new text'; //error: "regionContent is null" 
    // Ext.getCmp('contentArea').html = 'the new text'; //nothing appears, no error 
    // Ext.getCmp('contentArea').set('html', 'new text'); //error: "set is not a function" 


    }); 

}); 

Answer 1

Essayez d'utiliser la méthode « mise à jour »:

regionContent.update('new text');