iframeextjsextjs4extjs4.1extjs4.2

Extjs iframe - Embedding content from another page into an extjs application


I am new to working with iframes in extjs. I am looking to embed content from another page (another URL) into an existing extjs application. Is extjs iframe the correct way to go about it? if so, how do I render the component ? Any suggestions would be helpful for me to try. I was trying the code as below, but I don't see the component being rendered/contents getting embedded.

Ext.define(Ext.panel.Panel,

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

Solution

  • 1.You can create a Extjs js class like above and to render this component,you need to create and use it's instance like below code.

    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.You can create an Extjs class like below and use them inside your application. In my case i have created Extjs class and used it in my application using it's xtype.

    Extjs class code:

    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);
    },
    });
    

    Inside my main.js:(main-view)

    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}'
            }
        }]
    });