PDA

View Full Version : Resize Iframe om desktop



localhorst
20 Jul 2009, 1:24 AM
Hello there!

I played a bit with the Desktop-Example in the package and I was really impressed. =D>

Now I have a window with an iframe in it. How can I resize the iframe with the window?
Example: I have a window (200x200px) and an iframe in it (200x150px x:0, y:50).
Now I'm resizing the window to 500px1000px and the iframe now should be 200x950px large (x: 0, x:50). How to do that?

And another question: How can I forbid the resizing and maximizing the window? Is there a parameter?

Thanks a lot!

Greetings from Germany,
localhorst

saJoshua
20 Jul 2009, 1:28 AM
use an "anchor" or a 'fit' layout in your window

set resizeable : false on your window.

Condor
20 Jul 2009, 1:30 AM
1. How are you inserting an IFRAME in the window?

Use something like:

new Ext.Window({
title: 'Hello World',
width: 300,
height: 200,
layout: 'fit',
items: {
xtype: 'box',
autoEl: {tag: 'iframe', src: 'http://www.extjs.com'}
}
}).show();

2. Unfortunately, Ext.Window.initEvents doesn't apply maxWidth or maxHeight to the resizer, but you could set constrain:true or constrainHeader:true.

localhorst
20 Jul 2009, 1:44 AM
Thanks for the quick replies! :)

@resizable: false: Thanks, that works, but I can maximize the window. How can I forbid that :-? Even with constrain and constrainHeaders it do not work.

@iframe: I'm having there a tab-element - here is the snippet (copied from the tab-window):

layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,

items: [{
title: '<img src="applications/settings_window/images/wallpaper-icon.png" border="0">&nbsp;Desktop',
header: false,
html : '<iframe src="applications/settings_window/src/wallpaper.php" width="620" height="410" align="left" scrolling="auto" marginheight="0" marginwidth="0" frameborder="2"></iframe>',
border: false
},{
title: '<img src="applications/settings_window/images/appearance-icon.png" border="0">&nbsp;Darstellung',
header: false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: '<img src="applications/settings_window/images/autorun-icon.png" border="0">&nbsp;Auto-Run',
header: false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: '<img src="applications/settings_window/images/quickstart-icon.png" border="0">&nbsp;Schnellstart',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: '<img src="applications/settings_window/images/quickstart-icon.png" border="0">&nbsp;Verkn&uuml;pfungen',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
}]
})
});

The layout-change did not work. And I'm not sure wether I may include items in a tab-element? Maybe I'm making it false:

title: '<img src="applications/settings_window/images/appearance-icon.png" border="0">&nbsp;Darstellung',
header: false,
items: {
xtype: 'box',
autoEl: {tag: 'iframe', src: 'http://www.extjs.com'}
}
border:false

Can you take a look on it?

Thanks again!

Have a nice day!

localhorst

Condor
20 Jul 2009, 1:55 AM
1. Use maximizable:false.

2. Replace

html : '<iframe src="applications/settings_window/src/wallpaper.php" width="620" height="410" align="left" scrolling="auto" marginheight="0" marginwidth="0" frameborder="2"></iframe>'
with:

layout: 'fit',
items: {
xtype: 'box',
autoEl: {
tag: 'iframe',
src: 'applications/settings_window/src/wallpaper.php',
align: 'left',
scrolling: 'auto',
marginheight: '0',
marginwidth: '0',
frameborder: '2'
}
}

localhorst
20 Jul 2009, 2:08 AM
Hey! This works great!
Thanks a lot! :D