PDA

View Full Version : html link target="some_viewport_region_id" ???



AgentSmith
24 Sep 2009, 10:53 AM
Simple question I hope. I would like to know how to direct the contents of a href (ie <a href="HelloWorld.html" target="north_id">Render to north region</a>) to an Ext.Viewport region. There are probably many was to do this, so maybe you could provide a few simple ones. Thanks.




Ext.onReady(function(){
new Ext.Viewport({
layout: "border",
id: 'viewport_id',
renderTo: Ext.getBody(),
items: [{
region: "north",
id: 'north_id',
xtype: 'panel',
height: 200,
html: 'North'
},{

region: 'west',
id: 'west',
xtype: 'panel',
width: 200,
html: 'West'
},{

region: 'center',
id: 'center',
xtype: 'panel',
border: false,
html: '<a href="HelloWorld.html" target="north_id">Render to north region</a>'
}]
});
}); // Ext.onReady()

hendricd
24 Sep 2009, 10:59 AM
@AgentSmith -- Link-targeting (on the same page) requires an IFrame. See MIF2 (Ext3) in my sig block below.
It could look something like this:


Ext.onReady(function(){
new Ext.Viewport({
layout: "border",
id: 'viewport_id',
renderTo: Ext.getBody(),
items: [{
region: "north",
id: 'north_id',
xtype: 'iframepanel',
height: 200,
html: 'North'
},{

region: 'west',
id: 'west',
xtype: 'panel',
width: 200,
html: 'West'
},{

region: 'center',
id: 'center',
xtype: 'panel',
border: false,
html: '<a href="HelloWorld.html" target="north_id">Render to north region</a>'
}]
});
}); // Ext.onReady()

AgentSmith
24 Sep 2009, 12:01 PM
Isn't there a more simpler way of doing this? This requires using some custom ux component.

hendricd
24 Sep 2009, 12:06 PM
That is the simplest (if you're asking for <a target="some-browser-instance"> ).

AgentSmith
6 Oct 2009, 11:28 AM
Ok, I used your suggestion and it's bringing up the document (HelloWorld.html) in another window and not the north region. What am I missing?



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>

<!-- This is required to load html content from local filesystem.
See "Loading HTML from Local Filesystem.jpg" in "ext/ux" folder
for more information. -->
<script type="text/javascript" src="../../ext/ux/ext-basex.js"></script>

<script type="text/javascript" src="../../ext/ux/mif/miframe.js"></script>

<script type="text/javascript">
/* Path to the blank image must point to a valid location on your server. */
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';

/* Main application entry point. */
Ext.onReady(function(){

var viewport =
new Ext.Viewport({
layout: "border",
id: 'viewport_id',
renderTo: Ext.getBody(),
items: [{
region: "north",
id: 'north_id',
xtype: 'iframepanel',
height: 100,
html: 'North'
},{
region: 'west',
xtype: 'panel',
width: 200,
html: 'West'
},{
region: 'center',
id: 'center_id',
xtype: 'panel',
html: '<a href="HelloWorld.html" target="north_id">Render to north region</a>'
},{
region: 'east',
xtype: 'panel',
width: 200,
html: 'East'
},{
region: 'south',
xtype: 'panel',
height: 100,
html: 'South'
}]
});

}); // Ext.onReady()

</script>
</head>
<body>
</body>
</html>

Mthor
6 Oct 2009, 1:34 PM
I used the manage iframes that was mentioned and then use this onclick

onClick="parent.Ext.getCmp('center-panel').setSrc('your-link.htm');"

hendricd
6 Oct 2009, 2:13 PM
@AgentSmith --
Sorry, I forgot an important config requirement for frame-targetting. MIF 2 implements complex components (like ux.MIF.Panel and ux.MIF.Window) as a child MIF.Component item under-the covers. So you'll need to pass a frameCfg option to specify the name of the child MIF.Component's iframe:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>

<!-- This is required to load html content from local filesystem.
See "Loading HTML from Local Filesystem.jpg" in "ext/ux" folder
for more information. -->
<script type="text/javascript" src="../../ext/ux/ext-basex.js"></script>

<script type="text/javascript" src="../../ext/ux/mif/miframe.js"></script>

<script type="text/javascript">
/* Path to the blank image must point to a valid location on your server. */
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';

/* Main application entry point. */
Ext.onReady(function(){

var viewport =
new Ext.Viewport({
layout: "border",
id: 'viewport_id',
renderTo: Ext.getBody(),
items: [{
region: "north",
id: 'north_id',
xtype: 'iframepanel',
frameCfg : { name : 'north_frame' },
height: 100,
html: 'North'
},{
region: 'west',
xtype: 'panel',
width: 200,
html: 'West'
},{
region: 'center',
id: 'center_id',
xtype: 'panel',
html: '<a href="HelloWorld.html" target="north_frame">Render to north region</a>'
},{
region: 'east',
xtype: 'panel',
width: 200,
html: 'East'
},{
region: 'south',
xtype: 'panel',
height: 100,
html: 'South'
}]
});

}); // Ext.onReady()

</script>
</head>
<body>
</body>
</html>
See it in action, here (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=target).

AgentSmith
7 Oct 2009, 5:30 AM
That worked - thanks! Now if I want to replace the contents of one of the iframepanels, how should I do that? I used the following which worked but not sure if best approach?

Ext.getCmp('viewport_id').findById('center_id').setSrc('HelloWorld.html');

You mentioned in your documentation (Loading your ManageIFrame) that IFrameEl.load() is not the same as IFrameEl.setSrc(). Ok, so how is it different and when would I use one versus the other?

hendricd
7 Oct 2009, 5:41 AM
That worked - thanks! Now if I want to replace the contents of one of the iframepanels, how should I do that? I used the following which worked but not sure if best approach?

Ext.getCmp('viewport_id').findById('center_id').setSrc('HelloWorld.html');


That MIF Component has an id, right?:

Ext.getCmp('north_id').setSrc('HelloWorld.html');

You mentioned in your documentation (Loading your ManageIFrame) that IFrameEl.load() is not the same as IFrameEl.setSrc(). Ok, so how is it different and when would I use one versus the other?

mifC.setSrc/setLocation -- sets the URL that the IFRAME itself (by it's src attribute) will load (GET only).

mifC.getFrame().load(...) -- performs an Ext.Ajax request (GET,POST) and replaces the frame's document with the results. (See the Docs for Ext.Element.load for more on all options.)