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();


    }

});

wantok · Accepted Answer · 2013-03-15T15:51:22.510

4

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.

edited Mar 15 '13 at 15:51

answered Mar 15 '13 at 15:38

wantok

977
5
16

I only created it in the button to make a simple example, normally it will be defined someplace else just once. I think you did not address my problem. My button is in the windows that popped up, not the button that popped up the window. I think "this" is the window, not the viewport. Also, regarding componentquery. any pointers or info regarding my question there? -Thanks – Peter Kellner Mar 15 '13 at 18:49
Your title says you're trying to get the viewport component when the window button is clicked. That's what the code I provided does. Your viewport button click handler has its scope set as the viewport. That means that you have a reference to the viewport in onButtonClick. Because I saved off a reference to the viewport in that method, the window's onButtonClick method has a reference to it and can grab the component you want from it. – wantok Mar 15 '13 at 19:35
If you use Ext's MVC architecture you can easily setup `refs` to the components you care about. Using `refs` you specify a selector to the component you care about and Ext generates a getter method for you automatically. The first time the method is called, the component it retrieves it is cached automatically for you. Your controller would then be in charge of listening to the click events and doing something with the component. This simplifies things as your view components don't need to know anything about any other components. – wantok Mar 15 '13 at 19:40
Regarding Ext.ComponentQuery: I pretend it's just like the select method on an Element and it pretty much is. The question is then, how does Ext construct the component tree. The answer is the `getRefItems` method. The reason window and viewport can't use `up` or `down` to get components from the other is that getRefItems on the viewport will not return the window and viceversa. – wantok Mar 15 '13 at 19:54
thanks. that is a help. I'll dig some more. sounds like componentquery is a good way to go for production. – Peter Kellner Mar 15 '13 at 22:46

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

1 Answers1