1

I have an app with several tabs written in ExtJs 4.

One of the tabs is just an iframe. I create it like this and it works fine.

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>'
                },
]

I would like create the page Dynamically using more of an OOP design patter though by extending an Ext.panel.Panel. If I can do this I can add some more functionality ( like a basic toolbar with a back button ).

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 ) );
    }
}
});

However, this is not working. I expect its how I am trying to cram the html into the panel but am not sure. Any help appreciated.

4

1 回答 1

0

你试过 ux:miframe.js吗？文档可在此处获得。很长一段时间以来，我一直在使用 ExtJS 3.x 在面板中嵌入 iframe。我不知道它是否已经移植到 ExtJS4。

于 2012-11-04T08:36:53.773 回答