PDA

View Full Version : Adapt ux.IFrame to windows size



vuilled
15 Jan 2013, 8:12 AM
Hi,

I develop something based on the webdesktop example. Since all function are already developed to handle windows behavior, I want to incorporate an ux.IFrame in a traditionnal windows create by the ux.desktop function createWindow().

Until here no problem, but now I want to adapt dynamically the size of the ux.IFrame according to the size of the Window.

Here is the code



var windowIndex = 0;

Ext.define('MyDesktop.BogusModule', {
extend: 'Ext.ux.desktop.Module',

requires: [
'Ext.ux.IFrame',
],

init : function(){
this.launcher = {
text: 'app '+(++windowIndex),
iconCls:'app',
handler : this.createWindow,
scope: this,
windowId:windowIndex
}
},

createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('bogus'+src.windowId);
if(!win){
win = desktop.createWindow({
id: 'App'+src.windowId,
title:src.text,
width:640,
height:480,
items :

new Ext.ux.IFrame({

src:'myurl'


}),



iconCls: 'bogus',
animCollapse:false,
constrainHeader:true
});
}
win.show();
return win;
}
});


I try with layout: 'fit', layout:'auto'...

I think there is maybe something to do with the componentLayout (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-componentLayout) property but I don't really know how to use it.

Thank you for your help

Best regards,

David

mitchellsimoens
17 Jan 2013, 9:02 AM
You've tried this?


win = desktop.createWindow({
id: 'App'+src.windowId,
title:src.text,
width:640,
height:480,
layout : 'fit',
items : new Ext.ux.IFrame({
src:'myurl'
}),
iconCls: 'bogus',
animCollapse:false,
constrainHeader:true
});

vuilled
17 Jan 2013, 9:04 AM
With layout:'fit',

The width adaptation is good but the height adaptation don't work.

Regards,

David

vuilled
23 Jan 2013, 6:24 AM
Perhaps this would help someone.

Finally I used another approach to load the iframe. Like that dynamic layout work perfectly and load mask too :)


items :
{
xtype: 'component',
autoEl: {
tag: 'iframe',
src: me.url,
params:{test:'coucou'},

height: '100%',
width: '100%'
} ,

listeners: {
load: {
element: 'el',
fn: function () {
this.parent().unmask();
}
},
render: function () {
this.up('panel').body.mask('Loading...');
}
}
},