javascript - 使用将呈现 iframe 的 HTML 更新 ExtJS 面板

Question

我有一个应用程序，其中有多个用 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 塞入面板的方式，但我不确定。任何帮助表示赞赏。

Answer 1

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