Build a browser browser in a browser using extjs

Question

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

Here is what I still have:

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"></iframe>' }); 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 try to load the iframe contents of what was entered inside the combobox, but I can’t find out how to “tell” him about the page load, and I couldn’t even “get” when the user hits 'enter'. Maybe replace the combo box with the input field? I don’t know how to do this (starting with extjs).

Thank you for your help.

Answer 1

You can try the following:

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

Hi

Answer 2

If you are serious about working with iframes in Ext JS, you really should use the custom extension ManagedIFrame . Working with a raw iframe inside Ext (especially inside layouts) is not the easiest attempt to try and do from scratch.