Как я могу получить доступ к другим объектам extJS из событий нажатия extJS?

Question

В приведенном ниже коде в событии click для моего объекта menuItem1 как я могу изменить html-содержимое объекта renderContent, чтобы, когда пользователь щелкает заголовок пункта меню, содержимое в середине страницы изменяется?

(Во всех примерах, которые я смотрю, события щелчка создают новые объекты, но не изменяют существующие.)

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

Попробуйте использовать метод "update":

regionContent.update('new text');