ExtJS 加载面板重复

Question

在我的网站中，为了加载不同的页面（多页网站），我有一个主面板，其 ID 为 'content-panel'。
当我想加载不同的页面时，我有一个名为 'loadPage' 的 javascript 函数，它将我想要的页面（面板）加载到 'content-panel'.
但是我要加载的页面必须有这个代码：

Ext.require(['*']);
Ext.onReady(function() {
    ...
    var panel = Ext.Cmp('content-panel');
    panel.add(loginPanel);
    panel.layout.setActiveItem(loginPanel);
    panel.doLayout();
    panel.setLoading(false);
});

在这种情况下，它加载 page/panel 即 loginPanel，它在 Ext.onReady
中定义对我来说这很好，我不知道我的网站有任何其他方式是多页的。
但是每次我想转到一个页面时，它都会将该页面加载到 'content-panel'，即使它之前已经加载过。如果页面不在 'content-panel' 项目内，我想要一种方法只将页面添加到 'content-panel'。

更新：
这是 loadPage

function swap(parent, replacement, url) {
  var alpha = document.querySelector(parent);
  var target = alpha.childNodes[0];
  var omega = document.createElement(replacement);
  omega.src = url;
  omega.type = 'text/javascript';
  alpha.replaceChild(omega, target);
}
function loadPage(panel, toPanel) {
    toPanel.setLoading(true);
    swap('head', 'script', panel);
}

它是这样使用的：loadPage('Ctl_base/view_admin/mainPage', Ext.getCmp('panel'));
我在 ExtJS 中使用 CodeIgniter。

我已经尝试过的：
我只想在 loginPanel 不存在的情况下执行 panel.add(loginPanel)。
我试过：

if(panel.getComponent(loginScreen) == undefined) { panel.add(loginPanel); }

即使 panel 已有该组件，它也会添加该组件。
我也试过：

function hasComponent(parent, child) {
    parent.items.items.forEach(function(item) {
        if(item == child){
            return true;
        }
    });
    return false;
}

if(!hasComponent(panel, loginPanel)) { panel.add(loginPanel); }

而且它也不起作用。

Answer 1

我设法通过在我要加载的面板上放置 itemId 来解决这个问题，在 panel.layout.setActiveItem(loginPanel); 上我放置了 panel.layout.setActiveItem('itemIdOfPanel');

ExtJS 加载面板重复

ExtJS loading panels repetition

extjs

loading

panel