动态加载TabPanel项目内容 ext.js 5.1.3版本

Question

我正在使用extJs 5.1.3版本。我想从一个数组中加载tabpanel的项目。但问题是它在浏览器中无限期地加载，而不显示我的tabpanel。下面是我的代码。

this.myPanel = new Ext.create('Ext.tab.Panel', {
        height: 500,
        activeTab: 0,
        items: [
            myEntities.forEach(function (item) {
                this.midPanel.add({
                    title: item.box.id,
                    html: "<iframe width ='100%' height='100%' src='/myPage.aspx?id='+ item.box.id +''><p>Your browser does not support iframes.</p></iframe>"
                })
            })
        ],
        renderTo: Ext.getBody()
    });

该代码对于静态项目是有效的。例如：

this.myPanel = new Ext.create('Ext.tab.Panel', {
        height: 500,
        activeTab: 0,
        items: [
            title: "X",
                    html: "<iframe width ='100%' height='100%' src='/myPage.aspx?id=123'><p>Your browser does not support iframes.</p></iframe>"
        ],
        renderTo: Ext.getBody()
    });

我只是想知道我在TabPanel的动态项目加载中哪里做错了。如果有人能告诉我这个问题或演示，请提前感谢。

Answer 1

嗯，这对我这个初学者来说有点棘手。我通过在另一个Panel中加载项目并将其引用到midPanel项目属性来解决这个问题。这是我的最终解决方案。

        var tabs = [];
    myEntities.forEach(function (item) {
        tabs.push(Ext.create('Ext.Panel', {
            title: "Box Id: " + item.box.id,
            html: '<iframe width="100%" height="100%" src="../myPage.aspx?id=' + item.box.id +'"><p>Your browser does not support iframes.</p></iframe>'
        }))
    });

    this.midPanel = new Ext.create('Ext.tab.Panel', {
        height: 500,
        activeTab: 0,
        items: tabs,
        renderTo: Ext.getBody()
    });