Create a window browser inside the browser with extjs

Question

I'm trying to create a mini browser inside a window using extJS.

Here's what i have so far :

panelContent = new Ext.Panel({
        region: 'center',
        margins: '0 0 0 0',
        autoScroll: true,
        html: '<iframe style="overflow:auto;width:100%;height:100%;" frameborder="0"  src="http://www.google.com"&gt;&lt;/iframe&gt;'
    });
var tb = new Ext.Toolbar();
var combo = new Ext.form.ComboBox({
     width:435,
    });
tb.addField(combo);
tb.doLayout();
browser = new Ext.Window({
        title: 'Internet Browser',
        tbar: tb, 
    closable: true,
        closeAction: 'hide',
        width: 600,
        height: 600,
        border:false,
        plain: true,
        layout: 'border',
        items: [panelContent],
});

I'm trying to get the iframe load the content of what's typed inside the combobox, but i can't find out how to 'tell' him to load a page, and i could not even 'get' when the user hits 'enter'. Maybe replacing the combobox by inputbox ? don't know how to do this (starting with extjs).

Thank you for your help.

Answer 1

If you're serious about working with iframes in Ext JS you really should be using the ManagedIFrame user extension. Working with a raw iframe within Ext (especially inside layouts) is not the easiest thing to try and do from scratch.

Answer 2

You can try this:

Ext.IframeWindow = Ext.extend(Ext.Window, {
onRender: function() {
    this.bodyCfg = {
        tag: 'iframe',
        src: this.src,
        cls: this.bodyCls,
        style: {
            border: '0px none'
        }
    };
    Ext.IframeWindow.superclass.onRender.apply(this, arguments);
}
});

var w = new Ext.IframeWindow({
id:id,
width:640,
height:480,
title:"Knowledge Control Solutions Iframe Window Sample",
src:"http://www.google.es"
})


w.show();

Regards