如何从ExtJS 4中的弹出窗口获取对视口中基本组件的引用

我正在努力获取引用，而不是使用Ext.getCmp（..）。我理解为什么最好不要在生产应用程序中使用Ext.getCmp，主要是因为可能会混淆重复的DOM id。我已经在下面创建了一个基本示例，我在其中添加了一些注释，我希望，如果我能找到答案，将有助于我更好地理解如何获取参考资料

我也在寻找一些关于这个主题的非常好的解释、教程等。我认为学习如何做ComponentQuery是最好的，但我甚至不确定是否是这样。因此，没有更多的话，这里的代码。请看一下弹出窗口中的按钮事件，了解我希望了解的内容

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


    }

});

Ext.define（'MyApp.view.MyViewport'{
扩展：“Ext.container.Viewport”，
布局：{
类型：“边框”
},
initComponent:函数（）{
var me=这个；
Ext.applyIf（我{
项目：[{
xtype:'面板'，
弹性：2，
地区：'中心'，
标题：“我的小组”，
摘要：[{
xtype:'工具栏'，
码头：“顶部”，
项目：[{
xtype:'按钮'，
文本：“MyButton”，
听众：{
点击：{
fn:me.onButtonClick，
范围：我
}
}
}]
}],
项目：[{
xtype:'组件'，
html:“我的组件”
}]
}]
});
me.callParent（参数）；
},
onButtonClick：功能（按钮、e、eOpts）{
Ext.define（'MyApp.view.MyWindow'{
扩展：“Ext.window.window”，
身高：250，
宽度：400，
标题：“我的窗口”，
initComponent:函数（）{
var me=这个；
Ext.applyIf（我{
项目：[{
xtype:'按钮'，
text:“要在打开此窗口的窗口中获取指向我的组件的链接”，
听众：{
点击：{
fn:me.onButtonClick，
范围：我
}
}
}]
});
me.callParent（参数）；
},
onButtonClick：功能（按钮、e、eOpts）{
//我想设置
//组件在下面的窗口中
//我想有效地做到这一点
//用户项目ID？
//使用组件查询？
//使用向上/向下/等。
//   
//需要componentquery的帮助，extjs帮助对我没有帮助
//我想我需要更多的基础知识。
this.up（'panel'）.up（'panel'）.down（'component'）.html='set from button'；
console.log（this.up（'panel'）.up（'panel'）.down（'component'））；
}
});
var win=Ext.create（'MyApp1.view.MyWindow'，{}）；
win.show（）；
}
});

窗口是浮动的，因此您不能使用

向上

返回视口。同样，您不能在视口中使用

down

在windows中查找任何组件。您的外部

onbutton单击方法将在视口范围内调用。如果此时保存了对
this
的引用，则可以将其与
down
一起使用以获取组件

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
}

另一方面，我不确定您是否希望在单击按钮时定义窗口类。除非您能保证按钮只会被单击一次，否则您应该在别处定义类，并在单击处理程序中创建窗口。这会使获取对视口的引用变得复杂，但您可以在创建视口时轻松地将其设置为窗口的属性，或者只需在窗口的配置对象中添加onButtonClick方法。
窗口是浮动的，因此您无法使用
up
返回视口。同样，您不能在视口中使用
down
在windows中查找任何组件。您的外部
onbutton单击方法将在视口范围内调用。如果此时保存了对
this
的引用，则可以将其与
down
一起使用以获取组件

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
}

另一方面，我不确定您是否希望在单击按钮时定义窗口类。除非您能保证按钮只会被单击一次，否则您应该在别处定义类，并在单击处理程序中创建窗口。这使得获取对视口的引用变得复杂，但您可以在创建视口时轻松地将其设置为窗口上的属性，或者只在窗口的配置对象中添加onButtonClick方法。
我在按钮中创建它只是为了制作一个简单的示例，通常它将在其他地方定义一次。我想你没有解决我的问题。我的按钮在弹出的窗口中，而不是弹出窗口的按钮。我认为“这”是窗口，而不是视口。另外，关于componentquery。关于我的问题有什么建议或信息吗-感谢您的标题说，单击窗口按钮时，您正在尝试获取视口组件。我提供的代码就是这样做的。视口按钮单击处理程序的作用域设置为视口。这意味着您在onButtonClick中有对视口的引用。因为我在该方法中保存了对视口的引用，所以窗口的onButtonClick方法具有对它的引用，可以从中获取所需的组件