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

in below code in click event menuitem1 object, how can change html content of rendercontent object when user clicks menu item's header, content in middle of page changes?

(in examples at, click events creating new objects not changing existing objects.)

ext.onready(function(){      var menuitem1 = new ext.panel({         id: 'panelstart',         title: 'start',         html: 'this start menu item.',         cls:'menuitem'     });      var menuitem2 = new ext.panel({         id: 'panelapplication',         title: 'application',         html: 'this 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 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 null"     // ext.getcmp('contentarea').html = 'the new text'; //nothing appears, no error     // ext.getcmp('contentarea').set('html', 'new text'); //error: "set not function"       });  }); 

try using "update" method:

regioncontent.update('new text');