Javascript Sencha ExtJS：为什么菜单会附加到视口而不是实例视图？

嘿，我对ExtJS开发和总体开发还不熟悉。我还在上大学，目前正在尝试为一个用ExtJS制作的Webapp构建UI，我对菜单和它们的工作方式有点问题。我很确定我忽略了一些东西，必须有一个简单的方法来做我打算用菜单做的事情

具体来说，我的应用程序中有两个菜单，它们都给了我同样的问题。。。 第一个使用本例中的代码：

它有几个字段，当被更改时，应该更新主视图。。。 这里的问题是菜单会附着到视口

this.topMenu = Ext.Viewport.setMenu(this.getMenuCfg('top'), {
            side: 'top'
        });

它将菜单中字段的侦听器的范围设置为视口，而不是实例化视图的控制器，这样就很难找到我在主视图中查找的实际组件，甚至无法从连接到主视图的viewmodel加载存储

事实上，我必须使用调试器对其进行反向工程，然后才能找到这种神秘的方式进入我的商店：

var me = this,
    vm = me.getViewModel().children["generated-cryptic-name-of-my-model-1"],
    myStore = vm.getStore('MyStore');

当然，问题也会反过来解决。。。 从我的主视图的控制器触发的内部方法，我将无法在菜单中找到组件的引用

this.lookupReference('reference')

取而代之的是，我不得不再次通过给组件一个ID来找到一种相当不直观的方法。再次，我只能通过使用调试器来找到这种方法。。。看起来是这样的：

var me = this,
    menuItems = me.topMenu.getActiveItem().getItems(),
    fieldset = menuItems.getByKey('fldSet'),
    myField = fieldset.getItems().getByKey('myField');

因为一开始我在整个应用程序中只使用了一个菜单，所以我把它看作是一种技术债务，我没有进一步研究它，因为我找到了解决办法

但现在我添加了另一个菜单，这次是在SplitButton的split部分，如Docs（）所示

菜单再次连接到视口而不是实例化视图，这使得处理程序函数在viewportcontroller上启动，并利用

this.lookupReference（'reference'）

在实例化视图中查找我的组件的引用

我可以通过在实例化时为菜单设置控制器配置，使处理程序在正确的控制器上启动，但我还没有找到一种简单的方法来获取组件引用，这在这一点上真的让我感到不安

---

我很想听听你的建议，干杯

了解哪些视图、视图控制器和视图模型可能会有所帮助。代码

vm=me.getViewModel（）.children[“generated-cryptic-name-of-my-model-1”]

让我怀疑涉及到更多的viewmodels和ViewController，了解它们的关系会有所帮助。如果菜单根本不是问题，我也不会感到惊讶…

这让我很困惑，应该只有我的一个且唯一的ViewModel和一个ViewController（我还没有定义任何其他的）视图我的视图也只有父视图。我有一个基本视图，其中包括控制器和视图模型等非特定配置，然后我有一个扩展类，其中包含实际的组件和内容。。。我做到了这一点，因此我可以为我的应用程序的桌面或平板电脑版本提供不同的视图，这些视图都可以扩展基本视图。我可能要做的是在viewcontroller中设置afterrender函数，并记录连接的视图（this.getView（））。此视图应包含您的菜单项。使用此.getViewModel（）的viewmodel也是如此。只是为了确定一下。我对modern没有太多的经验，但在经典的extjs中，窗口（如果您使用的是moadl窗口）仅使用原始视图和视图模型，如果它是这样添加的：this.getView（）.add（theWindow.show（）；