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