Question on referencing objects inside of a view

[antun]

I'm new to Sencha (using 4.1.1), so this is probably a very basic quesion. In the code example below, why is a a reference to the panel, and b undefined? Is there a different method I need to use to reference a nested object?

Ext.define('SFC.view.flashcard.Show' ,{
    extend: 'Ext.container.Container',
    alias : 'widget.flashcardshow',


    layout: 'fit',


    title : 'Flashcard TODO',


    store: 'SpanishWords',


    items : [
        {
            itemId: 'flashWord',
            xtype: 'panel',
            layout: 'hbox',
            title: 'Spanish Flashcards',
            items: [
                {
                    xtype: 'text',
                    itemId: 'foobar',
                    text: 'palabra'
                }
            ]
        }
    
    ],  


    initComponent: function() {
        this.callParent(arguments);
    },


    updateWord: function(newWord) {
        // THIS WORKS:
        var a = this.getComponent("flashWord");
        console.log(a);


        // THIS DOES NOT:
        var b = this.ownerCt.getComponent("foobar");
        console.log(b);
    }
});

Thanks,

Antun

[evant]

this refers to

SFC.view.flashcard.Show

getComponent gets a direct child by id, so that's why a works.

In the second case, you're asking for the parent of

SFC.view.flashcard.Show

Then trying to get a single child component with an id of foobar, which, obviously, doesn't exist.

If you did:

var b = a.getComponent("foobar");

It should work.

[antun]

Thank you for the explanation. It works for me now. I ended up doing:

this.getComponent("flashWord").getComponent("foobar");

Is there a way to get around having to step through the hierarchy? e.g. an equivalent of getElementById?

Thanks,

Antun