PDA

View Full Version : iframe on menu click



pwiggins@cedarcreek.com
11 Feb 2014, 2:28 PM
New to Sencha. I'm trying to get a iframe displayed into a content area when on menu click. I figured out href property on it to go to another page, but I need to display that page directly into an iframe in a content window.

Is there something that does this easily in the IDE or what do I need to do to make this possible?

scottmartin
11 Feb 2014, 3:09 PM
Something like this?



Ext.onReady(function() {
var panel = Ext.create('Ext.Panel', {
width: 300,
height: 150,
title: 'Title',
layout: 'vbox',
frame: true,
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Click to open HTML window',
handler: function(b, e) {
var myWin = Ext.create("Ext.window.Window", {
title: 'HTML Window',
modal: true,
html: '<iframe src="http://www.sencha.com" width="100%" height="100%" ></iframe>',
width: 700,
height: 500
});
myWin.show();
}
}
]
});
});

delp
12 Feb 2014, 1:10 AM
There is also an Iframe component that is in the "ext-4.2.1\examples\ux" folder of the sdk. You may wish to use that component so that you can just pass it a src parameter and it will load the page for you.

For exmaple I needed a Panel with an Iframe to fill it - so I created a new component which extended the Panel.


layout: {
align: 'stretch',
type: 'vbox'
},
initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'uxiframe',
width:'100%',
height:'100%',
src: me.src,
flex: 1
}
]
});


me.callParent(arguments);
}

Then in my new component I created a loadUrl function which took a value and passed it to the load function of the Iframe.

pwiggins@cedarcreek.com
12 Feb 2014, 5:34 AM
I know this probably sounds stupid, but where is the onReadyFunction on the Sencha SDK? When I click on a menu option. And how do I have it show up in the panel I want it to? Navigation around this SDK is a little confusing to me. This is what I'm looking at trying. Thanks for your help.
47897

scottmartin
12 Feb 2014, 5:57 AM
Are you referring to:
Ext.onReady(function(){..})

In app.js, Ext.Application({..}) is used where onReady is invoked.

pwiggins@cedarcreek.com
12 Feb 2014, 7:20 AM
One problem I'm having in particular is the href in Config->Ext.menu.Item. it has it as default href # and if I put a link there it opens up the actual page I want to stick into an iframe on the page.

pwiggins@cedarcreek.com
12 Feb 2014, 7:33 AM
Ok I actually got the iframe to open up now. but of course in the modal. Is there a way to pass it into a panel. On the picture a few post up I I need to post it into the Panel there I have named contentPanel. Possible?

pwiggins@cedarcreek.com
13 Feb 2014, 11:59 AM
Would this work differently in a tree child


children: [{
text: 'Overview',
leaf: true,
something here?: ???,
}]


and just add it as a new property. Tried using the code above but doesn't like what I'm doing. Got it to work when I did it as a menu item.