How To Reference a container from a button on same level in ExtJS - extjs4

Question

I've got a structure like below.
I can reference (from the button handler) with up.down my component but I'm wondering if there is a more correct way to do this.
Ext.application({
name: 'MyApp',
launch: function () {
Ext.create('Ext.container.Viewport', {
items: [
{
tpl: 'Name: {first} {last}',
data: {
first: 'Peter',
last: 'Kellner'
},
padding: 20,
width: 200,
height: 200,
style: {
border: '2px solid red'
},
resizable: true,
itemId: 'myComponentItemId',
listener: {
resize: {
fn: function(component, width, height) {
console.log("w/h:" + width + " " + height);
}
}
}
},{
xtype: 'button',
text: "Disable",
handler: function () {
debugger;
this.up().down('#myComponentItemId').disable();
}
}
]
});
}
});

Answer 1

It is correct to use .up.down for what you are trying to do. You could use something like :
.up('form').down('button#login')
What you use in your code, on the other hand is not correct : this.up().down('#myComponentItemId'). You must pass a component selector as argument to .up().
Alternatives to .up.down are .nextSibling and .previousSibling. Similar, but more general there are also .nextNode and .previousNode.