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.