使用将呈现 iframe 的 HTML 更新 ExtJS 面板答案

【问题标题】：Update ExtJS Panel with HTML that will render iframe使用将呈现 iframe 的 HTML 更新 ExtJS 面板
【发布时间】：2012-11-03 17:48:40
【问题描述】：

我有一个应用程序，其中有几个用 ExtJs 4 编写的选项卡。

其中一个选项卡只是一个 iframe。我像这样创建它，它工作正常。

xtype: 'tabpanel',
title: 'My Embedded Web Pages',
items : [
                {
                    title: 'Google',
                    html : '<iframe width ="100%" height="100%" src="http://www.google.com"><p>Your browser does not support iframes.</p></iframe>'
                },
]

我想通过扩展 Ext.panel.Panel 使用更多的 OOP 设计模式来动态创建页面。如果我能做到这一点，我可以添加更多功能（比如带有后退按钮的基本工具栏）。

Ext.define('NS.view.web_browser.WebBrowser' ,{

extend: 'Ext.panel.Panel',

alias: 'widget.web_browser',

title: 'Web Browser',

refresh: function() {
    console.log('refresh');
},

initComponent: function( arguments ) {
    console.log('initComponent');

    this.callParent(arguments);
},
listeners : {
    viewready : function( view, options )
    {
        console.log('viewready');
        someText = '<iframe width ="100%" height="100%" src="http://www.google.com/"><p>Your browser does not support iframes.</p></iframe>';

        //I'm assuming 'this' is the panel
        this.update( Ext.util.JSON.encode( someText ) );
    }
}
});

但是，这不起作用。我希望它是如何尝试将 html 塞入面板但不确定的。任何帮助表示赞赏。

【问题讨论】：

如果你想加载远程内容，你应该使用加载器：docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-loader

标签： javascript extjs

【解决方案1】：

您是否尝试过 ux：miframe.js？该文档在here 可用。很长一段时间以来，我一直在使用 ExtJS 3.x 在面板中嵌入 iframe。我不知道它是否已经移植到 ExtJS4。

【讨论】：