ExtJS window and a webpage inside it

[Shehul]

Hi,

I am searching for,

When I click the button in a new window I can open any website with the given URL.

For now I found most people say use IFrame. The window and page shows fine but gives problem for resizing the window(the resize doesn't work properly).

=========================CODE 1====================================
var htmlNewWin = '<iframe width="100%" height="100%" frameborder="0" scrolling="no" src="' + winurl + '"></iframe>';
var win = Ext.create('Ext.Window',
{
width : 1000,
height : 480,
layout : 'fit',
plain : true,
maxWidth : window.screen.width,
maxHeight : window.screen.height,
maximizable : 'true',
minimizable : 'true',
resizable : 'true',
closable : true,
html : htmlNewWin
}
);

=========================CODE 1====================================
I searched and found,
http://stackoverflow.com/questions/1783919/create-a-window-browser-inside-the-browser-with-extjs
this also has the same problem.

I found this but it gives me blank window,

http://stackoverflow.com/questions/6025814/extjs-4-create-an-iframe-window

=========================CODE 2====================================
Ext.require([
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);
Ext.onReady(function(){


var trackit = Ext.create('Ext.Button',
{
text : 'Test',
renderTo : Ext.getBody(),
iconCls : 'map',
cls : 'cmbfonts',
textAlign : 'left',
//disabled : true,
handler : function ()
{
var win3=new Ext.Window({
title : "iframe",
width : 300,
height: 300,
layout : 'fit',
items : [{
xtype : "component",
autoEl : {
tag : "iframe",
src : "http://www.yahoo.com"
}
}]
}).show();
}
});
});

=========================CODE 2====================================
I am using ext 4.1 RC.

If someone can give me non I Frame based solution which has no resize problem it will be great
but if iframe is the only way than please reply how to fix the resizing problem.

Thanks,
Shehul
(http://stackoverflow.com/questions/1783919/create-a-window-browser-inside-the-browser-with-extjs)

[scottmartin]

See if the following for works for you:



Ext.onReady(function() {
myPanel = Ext.create('Ext.Panel', {
width: 300,
height: 100,
title: 'Title',
layout: 'vbox',
frame: true,
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Click to review and update your profile',
handler: function(b, e) {
var myWin = Ext.create("Ext.window.Window", {
title: 'HTML Window',
modal: true,
html: '<iframe src="http://www.cnn.com" width="100%" height="100%" ></iframe>',
width: 700,
height: 500
});
myWin.show();
}
},
{
xtype: 'box',
autoEl: {tag: 'a', href: 'javascript:;', html: 'CNN'},
listeners: {
click: {
element: 'el',
fn: function(){
var myWin = Ext.create("Ext.window.Window", {
title: 'HTML Window',
modal: true,
html: '<iframe src="http://www.cnn.com" width="100%" height="100%" ></iframe>',
width: 700,
height: 500
});
myWin.show();
}
}
}
}

]
});
});


Regards,
Scott

[Shehul]

Hi Scott,

I don't have problem with displaying the webpage in window with Iframe, my issue is the resizing the window,

try your code, yourself and see what happens when you resize, also try resizing the layout window example of ExtJS 4.1 RC you will notice the difference.

Also to reproduce the problem in your code , try changing html: "<p>Something</p>", the resize works very smoothly and when you have Iframe the resize gives problems.

Thanks,
Shehul



See if the following for works for you:



Ext.onReady(function() {
myPanel = Ext.create('Ext.Panel', {
width: 300,
height: 100,
title: 'Title',
layout: 'vbox',
frame: true,
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Click to review and update your profile',
handler: function(b, e) {
var myWin = Ext.create("Ext.window.Window", {
title: 'HTML Window',
modal: true,
html: '<iframe src="http://www.cnn.com" width="100%" height="100%" ></iframe>',
width: 700,
height: 500
});
myWin.show();
}
},
{
xtype: 'box',
autoEl: {tag: 'a', href: 'javascript:;', html: 'CNN'},
listeners: {
click: {
element: 'el',
fn: function(){
var myWin = Ext.create("Ext.window.Window", {
title: 'HTML Window',
modal: true,
html: '<iframe src="http://www.cnn.com" width="100%" height="100%" ></iframe>',
width: 700,
height: 500
});
myWin.show();
}
}
}
}

]
});
});


Regards,
Scott

[scottmartin]

In playing with this a bit, let me see if this is correct ...

In my example:

Resizing the window with an iframe, I was able to get the window to not always resize and on those instances the resize border remained active with mouse movement and things mouse actions and window movement become more random from there.

Can you be more specific on which layout example you are referring to? In the layout managers?

Scott.

[Shehul]

Hi Scott,

You are right in describing the problem, I am sorry couldn't reply last week.

I am using,

layout : 'fit'

Thanks,
Shehul


In playing with this a bit, let me see if this is correct ...

In my example:

Resizing the window with an iframe, I was able to get the window to not always resize and on those instances the resize border remained active with mouse movement and things mouse actions and window movement become more random from there.

Can you be more specific on which layout example you are referring to? In the layout managers?

Scott.

[Shehul]

Hi Scott,

I have posted my codes in my initial post(code1 and code2) , I am not using anything extra than that.

Thanks for your help and replies,
Shehul


Hi Scott,

You are right in describing the problem, I am sorry couldn't reply last week.

I am using,

layout : 'fit'

Thanks,
Shehul

[blackpig]

It seems that window loses focus when dragging or resizing over other iframe. I've made a simple workaround using jquery (but can be done other way). I'm hiding all iframes while dragging or resizing window. So windows are blank while operating on it, but in my case is not a problem (seems to work faster).
example:


frame.resizer.addListener('beforeresize', function(){
jQuery('.x-window').find('iframe').hide();
});
frame.resizer.addListener('resize', function(){
jQuery('.x-window').find('iframe').show();
});
frame.dd.addListener('dragstart', function(){
jQuery('.x-window').find('iframe').hide();
});
frame.dd.addListener('dragend', function(){
jQuery('.x-window').find('iframe').show();
});

Efect similar to setting windows "Show Window Contents or Outline While Dragging" disabled.