如何从extJS点击事件中访问其他extJS对象？

Question

在下面的代码中，我的menuItem1对象的单击事件中，如何更改renderContent对象的html内容，以便当用户单击菜单项的标题时，页面中间的内容会发生变化？

（在所有的例子我看，单击事件正在创建新的对象，但不改变现有对象。）

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

尝试使用“更新”的方法：

regionContent.update('new text');