Call other component Sencha Touch / Javascript

Question

I want to create something really simply, but I am somehow struggling with this.

It works in Sencha Architect 3, but it is giving me issues so I am trying to CMD way. In Architect I created a Controller, but for some reason this didn't work.

So I am trying with a simple listener.

My Question is how do I call "MyContainer" from the Button Tap event, because "Refreshing..." doesn't appear?

I tried:

MyContainer.setHtml('Refreshing...');

but this gave me: Uncaught ReferenceError: MyContainer is not defined

I also tried:

this.getMyContainer().setHtml('Refreshing...');

Uncaught TypeError: undefined is not a function

and this:

Ext.getElementById('MyContainer').setHtml('Refreshing...');

Uncaught TypeError: undefined is not a function

This is my MainView.js

Ext.define('WebChat.view.Main', {

 extend: 'Ext.tab.Panel', xtype: 'main', requires: [ 'Ext.TitleBar', 'Ext.Button' ], config: { itemId: 'MainView', items: [ { xtype: 'titlebar', docked: 'top', itemId: 'topBar', title: 'Obec Webchat', items: [ { xtype: 'button', action: 'back', id: 'BackButton', itemId: 'BackButton', margin: '5 70% 5 15', ui: 'back', text: 'Home' } ] }, { xtype: 'container', docked: 'top', height: '100%', html: '<iframe src="someurl" width="100%" height="100%" scrolling="yes"></iframe>', itemId: 'MyContainer', width: '100%' } ], listeners: [ { fn: 'onBackButtonTap', event: 'tap', delegate: '#BackButton' } ] }, onBackButtonTap: function(button, e, eOpts) { Ext.getElementsByTagName('MyContainer').SetHtml('Refreshing...'); } 

Thanks in advance.

Answer 1

Use:

this.down('#MyContainer').setHtml('Foo');

It's not a good idea to just make up method names see if they work ( Ext.getElementsByTagName ).

Answer 2

Give Ext.get('MyContainer').update('Refreshing...'); a try.