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

Question

我正在研究 extJs 5.1.3 版本。我想从数组中加载选项卡面板的项目。但问题是它在浏览器中无限期地加载并且不显示我的选项卡面板。下面是我的代码，

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

嗯，作为一个初学者，这对我来说有点棘手。我通过在另一个面板中加载项目并将其引用到 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()
    });

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

Load TabPanel Item content dynamically ext.js 5.1.3

extjs

typescript