Extjs 在Sencha应用程序中重用同一组件时重复引用

假设我们已经定义了一个组件（例如，字段集），我们希望在单个应用程序中重用该组件（例如，在两个不同的模式窗口中显示/使用它）。该字段集有一个引用，我们使用它来访问它。我们的目标是让这两个窗口包含独立的字段集，因此我们可以分别控制和收集每个窗口的输入

下面是演示问题的示例。一旦任何函数触发任何

lookupReference（…）

调用，Sencha就会发出警告，警告字段集“重复引用”。它在每个窗口上正确创建两个不同的字段集组件（通过分配不同的ID），但无法正确分配/定位引用。因此，这些窗口的某个字段集上的任何操作都将在“未知”字段集上执行（可能在第一个创建的字段集上），从而扰乱UI行为

我知道Sencha在操作引用时理解要使用哪个组件是一个问题，但是应该有一种方法可以多次重用相同的组件，而不会混淆实例。非常感谢您的帮助。

根据以下文档：

视图控制器是可以附加到特定视图实例的控制器，因此它可以管理视图及其子组件。视图的每个实例都将有一个新的视图控制器，因此实例是隔离的

这意味着在ViewController上使用

singleton

是不正确的，因为它必须绑定到单个视图实例

为了解决这个问题，我建议对您的进行一些修改，主要是从VC类中删除

singleton:true

，通过

lookup

访问视图，并通过

getController

访问

func

方法获取它们的VC

Ext.application({
    name: 'Fiddle',
    launch: function () {

        /**
         * @thread https://stackoverflow.com/questions/67462770
         */
        Ext.define('fsContainerHandler', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.fsContainerHandler',
            // TOOK OUT singleton: true
            func: function () {
                var x = this.lookupReference('fsRef');
                alert(x);
            }
        });

        Ext.define('fsContainer', {
            extend: 'Ext.container.Container',
            xtype: 'xFSContainer',
            controller: 'fsContainerHandler',
            items: [{
                xtype: 'fieldset',
                title: 'myFieldset',
                reference: 'fsRef'
            }]
        });

        Ext.define('mainContainerHandler', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.mainContainerHandler',
            singleton: true,
            onButton1Click: function () {
                var win = this.getView().window1;
                win.show();
                // CHANGED LOGIC
                win.lookup('theContainer').getController().func();
            },
            onButton2Click: function () {
                var win = this.getView().window2;
                win.show();
                // CHANGED LOGIC
                win.lookup('theContainer').getController().func();
            }
        });

        Ext.define('mainContainer', {
            extend: 'Ext.container.Container',
            width: 400,
            controller: 'mainContainerHandler',
            window1: null,
            window2: null,
            initComponent: function () {
                this.window1 = Ext.create('window1');
                this.window2 = Ext.create('window2');
                this.callParent(arguments);
            },
            items: [{
                xtype: 'button',
                text: 'Window 1',
                reference: 'btn1',
                handler: mainContainerHandler.onButton1Click,
                scope: mainContainerHandler
            }, {
                xtype: 'button',
                text: 'Window 2',
                reference: 'btn2',
                handler: mainContainerHandler.onButton2Click,
                scope: mainContainerHandler
            }]
        });

        Ext.define('window1', {
            extend: 'Ext.window.Window',
            title: 'Window1',
            modal: true,
            width: 100,
            height: 100,
            closeAction: 'hide',
            // ADDED referenceHolder
            referenceHolder: true,
            items: [{
                xtype: 'xFSContainer',
                // ADDED reference
                reference: 'theContainer'
            }]
        });

        Ext.define('window2', {
            extend: 'Ext.window.Window',
            title: 'Window2',
            modal: true,
            width: 100,
            height: 100,
            closeAction: 'hide',
            // ADDED referenceHolder
            referenceHolder: true,
            items: [{
                xtype: 'xFSContainer',
                // ADDED reference
                reference: 'theContainer'
            }]
        });

        Ext.create('mainContainer', {
            renderTo: document.body
        });
    }
});

---

为什么您的控制器必须是一个

单体
？这似乎是一件非常奇怪的事情。在项目中，这是一个古老的设计选择，能够轻松地控制来自不同位置的元素（不仅仅是从相关视图）。你认为这可能会导致问题吗？比如。。。在整个过程中添加了注释，所以您可以看到所有更改。非常有趣。我会研究你的方法然后回来。再次感谢，非常有用。所有这些都很有意义。我将不得不进行更多的研究，以将其纳入实际项目，但这肯定回答了这个问题，所以请张贴答案，以便我可以接受它。