1

ExtJs 4 で書かれたいくつかのタブを持つアプリがあります。

タブの 1 つは単なる 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をパネルに詰め込もうとしている方法を期待していますが、よくわかりません。どんな助けでも感謝します。

4

1 に答える 1

0

UXを試してみましたか：miframe.js？ドキュメントはこちらから入手できます。ExtJS 3.xでかなり長い間、パネルにiframeを埋め込むために使用しています。ExtJS4に移植されているかどうかはわかりませんが。

于 2012-11-04T08:36:53.773 に答える