Extjs iframe - 將來自另一個頁面的內容嵌入到 extjs 應用程序中

Question

我是在 extjs 中使用 iframe 的新手。 我希望將來自另一個頁面（另一個 URL）的內容嵌入到現有的 extjs 應用程序中。 extjs iframe 是正確的方法嗎？ 如果是這樣，我該如何渲染組件？ 任何建議都會對我有所幫助。 我正在嘗試如下代碼，但我沒有看到正在渲染的組件/內容被嵌入。

Ext.define(Ext.panel.Panel,

    initComponent: function(){
        this.items = [{
            xtype: 'box',
            autoEl: {
                tag: 'iframe',
                src: some URL,
                width: 640,
                height: 680,
            }
        }];
        this.callParent(arguments); 
    }
}); 

Answer 1

1.您可以像上面一樣創建一個Extjs js類並渲染這個組件，您需要像下面的代碼一樣創建和使用它的實例。

Ext.define('Iframe', {
        extend: 'Ext.panel.Panel',
        xtype: 'sample',

        initComponent: function(){
        this.items = [{
            xtype: 'box',
            autoEl: {
                tag: 'iframe',
                src: 'https://www.sencha.com/',
                width: 640,
                height: 680,
            }
        }];
        this.callParent(arguments); 
    }
    });

    Ext.create({
            xtype: 'sample',
            renderTo: Ext.getBody()
    });

2.您可以創建一個如下所示的 Extjs 類並在您的應用程序中使用它們。 在我的例子中，我創建了 Extjs 類並在我的應用程序中使用它的 xtype。

Extjs 類代碼：

Ext.define('MyApp.view.main.Iframe', {
extend: "Ext.panel.Panel",
xtype: 'iframe',
title: 'iframe',
initComponent: function() {
    var me = this;
    me.items = [{
        xtype: 'box',
        autoEl: {
                tag: 'iframe',
                src: 'https://www.sencha.com/',
                width: 640,
                height: 680,
            }
    }];
    this.callParent(arguments);
},
});

在我的 main.js 里面：（主視圖）

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',
        'MyApp.view.main.MainController',
        'MyApp.view.main.MainModel',
        'MyApp.view.main.List'
    ],

    controller: 'main',
    viewModel: 'main',

    ui: 'navigation',

    header: {
        layout: {
            align: 'stretchmax'
        },
        title: {
            bind: {
                text: '{name}'
            },
            flex: 0
        },
        iconCls: 'fa-th-list'
    },

    tabBar: {
        flex: 1,
        layout: {
            align: 'stretch',
            overflowHandler: 'none'
        }
    },

    items: [{
        title: 'Home',
        iconCls: 'fa-home',
        items: [{
            xtype: 'mainlist'
        }]
    }, {
        title: 'Groups',
        iconCls: 'fa-users',
        items: [{
            xtype: 'iframe'
        }]
    }, {
        title: 'Settings',
        iconCls: 'fa-cog',
        bind: {
            html: '{loremIpsum}'
        }
    }]
});