Add an Iframe to ModalBox

Case description:

You need to show a ModalBox with build-in Iframe.

Realization algorithm

1)First of all, you need to create an Iframe module. (IntDonateIframeControl)

Ext.define("Terrasoft.controls.IntDonateIframeControl", {
    extend: "Terrasoft.Component",
    alternateClassName: "Terrasoft.IntDonateIframeControl",
    tpl: [
        /*jshint quotmark:true */
        ''
        /*jshint quotmark:false */
    ],
    id: null,
    src: "https://academy.terrasoft.ru/",
    wrapClass: ["usr-iframe"],
    setIframeSrc: function(value) {
        value = value || "";
        if (this.src !== value) {
            this.src = value;
            this.safeRerender();
        }
    },
    init: function() {
        this.callParent(arguments);
        var selectors = this.selectors = this.selectors || {};
        selectors.wrapEl = selectors.wrapEl || "#" + this.id;
    },
    LoadPageBySrc: function() {
        var iframe = this.getWrapEl();
        iframe.dom.src = this.src;
    },
    onAfterRender: function() {
        this.callParent(arguments);
        this.LoadPageBySrc();
    },
    onAfterReRender: function() {
        this.callParent(arguments);
        this.LoadPageBySrc();
    },
    getBindConfig: function() {
        var bindConfig = this.callParent(arguments);
        return Ext.apply(bindConfig, {
            src: {
                changeMethod: "setIframeSrc"
            }
        });
    },
    getTplData: function() {
        var tplData = this.callParent(arguments);
        return Ext.apply(tplData, {
            src: this.src,
            wrapClass: this.wrapClass
        });
    }
});

2)You need to create a page that will contain Iframe and will be displayed in Modal Box.(IntDonateModalPage)

define("IntDonateModalPage", ["IntDonateIframeControl", "css!IntDonateIframeControl"], function() {
    return {
        attributes: {
            "TestText": {
                dataValueType: Terrasoft.DataValueType.TEXT,
                type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN
            }
        },
        messages: {
        },
        methods: {
            init: function(callback, scope) {
                this.callParent(arguments);
            },
            getHeader: function() {
                return this.get("Resources.Strings.PageCaption");
            },
            onRender: function() {
                this.callParent(arguments);
                var moduleInfo = this.get("moduleInfo");
                var boxSizes = moduleInfo.modalBoxSize;
                var width = boxSizes.width;
                var height = boxSizes.height;
                this.updateSize(width, height);
            }
        },
        //Insert already existed Iframe
        diff: [
            {
                "operation": "insert",
                "parentName": "CardContentContainer",
                "propertyName": "items",
                "name": "IntDonateIframe",
                "values": {
                    "generator": function() {
                        return {
                            "className": "Terrasoft.IntDonateIframeControl"
                        };
                    }
                }
            },
            {
                "operation": "insert",
                "name": "MyContainer",
                "propertyName": "items",
                "values": {
                    "itemType": Terrasoft.ViewItemType.CONTAINER,
                    "items": []
                }
            },
            {
                "operation": "insert",
                "parentName": "MyContainer",
                "propertyName": "items",
                "name": "MyGridContainer",
                "values": {
                    "itemType": Terrasoft.ViewItemType.GRID_LAYOUT,
                    "items": []
                }
            },
            {
                "operation": "insert",
                "parentName": "MyGridContainer",
                "propertyName": "items",
                "name": "TestText",
                "values": {
                    "bindTo": "TestText",
                    "caption": "Test text",
                    "layout": {"column": 0, "row": 0, "colSpan": 10}
                }
            }
        ]
    };
});

3)In page, you need to insert a button. After button click, Modal Dialog with Iframe should appear. (IntExcelReportPage)

define("IntExcelReportPage", ["IntReportConstants", "MaskHelper"],
    function(constants, MaskHelper) {
    return {
        entitySchemaName: "IntExcelReport",
        details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
        modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
        diff: /**SCHEMA_DIFF*/[
            {
                "operation": "insert",
                "name": "DonateButton",
                "values": {
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    "style": Terrasoft.controls.ButtonEnums.style.RED,
                    "caption": {
                        "bindTo": "Resources.Strings.DonateButton"
                    },
                    "click": {
                        "bindTo": "donateButtonClick"
                    }
                },
                "parentName": "RightContainer",
                "propertyName": "items",
                "index": 1
            }
        ]/**SCHEMA_DIFF*/,
        messages: {},
        attributes: {},
        mixins: {},
        methods: {
            subscribeSandboxEvents: function() {
                this.callParent(arguments);
                this.sandbox.subscribe("GetMasterEntitySchema", function() {
                    return this.get("IntEntitySchemaName");
                }, this, [this.getDetailId("IntRelatedSchemasDetail") + "_DetailModalBox"]);
                this.sandbox.subscribe("IntUploadFileClick", this.onFilesSelected, this, [this.sandbox.id]);
                this.sandbox.subscribe("GetModuleInfo", this.getDonateModalBoxConfig, this,
                    [this.getDonateModalBoxId()]);
            },
            donateButtonClick: function() {
                this.sandbox.loadModule("ModalBoxSchemaModule", {
                    id: this.getDonateModalBoxId()
                });
            },
            getDonateModalBoxConfig: function() {
                return {
                    "schemaName": "IntDonateModalPage",
                    "modalBoxSize": {
                        "width": "680px",
                        "height": "400px"
                    }
                };
            },
            getDonateModalBoxId: function() {
                return this.sandbox.id + "_DonateModalBox";
            }
        }
    };
});

Result

NB!

It's vital to note, that some websites don't allow insert them as Iframe