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。我一直用它来在Panels中嵌入iframe很长一段时间用ExtJS 3.x.我不知道它是否已经为ExtJS4移植了。

使用将呈现iframe的HTML更新ExtJS Panel

1 个答案: