How To Get Reference to base component in Viewport from pop up window in ExtJS 4

Question

I'm struggling with getting references and not using Ext.getCmp(..). I understand why it is best not to use Ext.getCmp in production apps, primarily because of potential confusion around duplicated DOM id's. I've create a basic sample below that I've put some comments in that I'm hoping, if I can find answers to will help me better understand how to get references.

I'm also looking for some really good explanations, tutorials, etc on this topic. I gather that learning how to do ComponentQuery's would be best but I'm not even sure if that is the case. So without further words, here the code. Please take a look at button event in pop up window for what I'm hoping to figure out.

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'panel',
                flex: 2,
                region: 'center',
                title: 'My Panel',
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{
                        xtype: 'button',
                        text: 'MyButton',
                        listeners: {
                            click: {
                                fn: me.onButtonClick,
                                scope: me
                            }
                        }
                    }]
                }],
                items: [{
                    xtype: 'component',
                    html: '<b>my component</b>'
                }]
            }]
        });

        me.callParent(arguments);
    },

    onButtonClick: function (button, e, eOpts) {

        Ext.define('MyApp.view.MyWindow', {
            extend: 'Ext.window.Window',

            height: 250,
            width: 400,
            title: 'My Window',

            initComponent: function () {
                var me = this;

                Ext.applyIf(me, {
                    items: [{
                        xtype: 'button',
                        text: 'Want to get link to my component in window that opened this',
                        listeners: {
                            click: {
                                fn: me.onButtonClick,
                                scope: me
                            }
                        }
                    }]
                });

                me.callParent(arguments);
            },

            onButtonClick: function (button, e, eOpts) {

                // I would like to set the html property of the 
                //   component in the window below
                //   I would like to do this efficintly
                //   user itemId?
                //   use componentquery?
                //   use up/down/etc.
                //   
                //   Need help with componentquery, extjs help is not helpful for me
                //   I need more basics I think.


                this.up('panel').up('panel').down('component').html = '<i>set from button</i>';
                console.log(this.up('panel').up('panel').down('component'));
            }

        });

        var win = Ext.create('MyApp1.view.MyWindow', {});
        win.show();


    }

});

Answer 1

Windows are floating so you cant use up to get back to your viewport. Likewise, you can't use down in your viewport to find any components in windows. Your outer onButtonClick method is called in the scope of the viewport. If you save off a reference to this at that point, you can use it with down to grab your component.

onButtonClick: function() {
    var viewport = this;

    Ext.define('YourWindow', {
       // setup everything
       onButtonClick: function() {
           // this may not return what you want since everything
           // else inside the viewport is technically also a component
           // You'd be better off adding an itemId to the component
           // you wish to grab and using that in the call to down.
           console.log(viewport.down('component'));
       }
    });

    // show window
}

On a side note, I'm not sure that you want to be defining your window class on button click. Unless you can guaranty that the button will only ever be clicked once, you should define your class elsewhere and just create the window in the click handler. That complicates getting a reference to the viewport, but you could easily set it as a property on the window when you create it, or just add the onButtonClick method in the window's configuration object.