我有一个应用程序,其中有多个用 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 塞入面板的方式,但我不确定。任何帮助表示赞赏。
最佳答案
您尝试过 ux: miframe.js
吗?该文档可用 here 。我在 ExtJS 3.x 中使用它在面板中嵌入 iframe 已经有一段时间了。我不知道它是否已移植到 ExtJS4。
关于javascript - 使用将呈现 iframe 的 HTML 更新 ExtJS 面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13211831/