PDA

View Full Version : Toolbar - trying to load external url to a div



Hedge
31 Dec 2009, 1:10 PM
I'm not sure I am doing this the correct way as I am an EXT JS newbie. I have a toolbar and I want to load the google calendar page into a div on the page. Here is the code I have. All it does is spin with the loading message. The local page loads work fine. Any idea?

Ext.onReady(function(){
//function for handling button clicks
var ToolbarClicked = function() {
return {
showFile: function(btn){
ToolbarClicked.doLoad(btn.pagetoget);
},
doLoad: function(file){
var ContentDiv = Ext.get('ContentDiv');
if (!ContentDiv) {
Ext.DomHelper.append(Ext.getBody(), {tag:'div',id:'ContentDiv'});
}
Ext.get('ContentDiv').load({
url: file
});
}
};
}();

//toolbar layout
new Ext.Toolbar({
renderTo: Ext.get('ToolbarDiv'),
items:[{
xtype: 'tbspacer'
},{
xtype: 'tbbutton',
text: 'Email Membership',
pagetoget: 'email-membership.cfm',
handler: ToolbarClicked.showFile
},{
xtype: 'tbspacer'
},{
xtype: 'tbseparator'
},{
xtype: 'tbbutton',
text: 'Event Calendar',
url: '',
pagetoget: 'http://www.google.com/calendar/render',
handler: ToolbarClicked.showFile
},{
xtype: 'tbspacer'
},{
xtype: 'tbseparator'
},{
xtype: 'tbbutton',
text: 'Member Management',
menu: [{
text: 'Edit Members',
pagetoget: 'edit-members.cfm',
handler: ToolbarClicked.showFile
},{
text: 'Add Members',
pagetoget: 'add-members.cfm',
handler: ToolbarClicked.showFile
}]
},{
xtype: 'tbspacer'
},{
xtype: 'tbseparator'
}]
});
});

My HTML code looks like the following.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Admin</title>
<link href="../lib/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="js/Toolbar.js"></script>
</head>

<body>

<div id="ToolbarDiv" style="text-align:center;"></div>

<div id="ContentDiv"></div>

</body>
</html>

flanders
1 Jan 2010, 1:31 PM
using AJAX requests you can only access URL's within the same domain as the current site. There are several ways around this, most of them can be found using google: 'bypass ajax cross-domain restriction' or something like that.

Condor
2 Jan 2010, 1:29 AM
You need an IFRAME to load pages from a different domain (try the ManagedIframe user extension).

Be warned: You can't access an IFRAME loaded from a different domain from your own application.