How can I access other extJS objects from within extJS click events?

Question

In the below code in the click event for my menuItem1 object, how can I change the html content of the renderContent object so when the user clicks the menu item's header, the content in the middle of the page changes?

(In all the examples I look at, the click events are creating new objects but not changing existing objects.)

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

Try using the "update" method:

regionContent.update('new text');