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

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.