PDA

View Full Version : BorderLayout problems



ray73864
1 Jun 2007, 10:44 PM
If i have the following code which implements a BorderLayout:



Simple = function() {
var northPanel, southPanel, eastPanel, westPanel, centrePanel;
return {
init : function() {
var mainLayout = new Ext.BorderLayout(document.body, {
north: { split: false, initialSize: 92 },
south: { split: false, initialSize: 65 },
east: { split: false, initialSize: 160 },
west: { split: false, initialSize: 160 },
center: { }
});
mainLayout.beginUpdate();
mainLayout.add('north', northPanel = new Ext.ContentPanel('header', { fitToFrame: true, closable: false }));
mainLayout.add('south', southPanel = new Ext.ContentPanel('footer', { fitToFrame: true, closable: false }));
mainLayout.add('east', eastPanel = new Ext.ContentPanel('leftnav', { fitToFrame: true, closable: false }));
mainLayout.add('west', westPanel = new Ext.ContentPanel('rightnav', { fitToFrame: true, closable: false }));
mainLayout.add('center', centrePanel = new Ext.ContentPanel('content', { fitToFrame: true }));
mainLayout.endUpdate();
northPanel.setContent('<center><img src="images/stfbanner1.jpg" style="border: 0x solid #000" alt="Star Trek: Foundations MUSH" /></center>');

// Set the panels to a URL
southPanel.setUrl('footer.html');
westPanel.setUrl('left-navigation.html');
eastPanel.load('right-navigation.html');
// Refresh the East, West and South panels
westPanel.refresh();
southPanel.refresh();
eastPanel.refresh();
}
};
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);


How would i get it so that when you click a link in the 'westPanel' the page that that link points to opens up in the CentrePanel?

I tried viewing the sourcecode for the documentation centre but that code deals with it for a TreePanel.

HTML Page:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Star Trek: Foundations MUSH</title>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ytheme-gray.css" />
<script type="text/javascript" src="/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script type="text/javascript" src="layout.js"></script>
<link rel="stylesheet" href="styles/new.css" />
</head>
<body>
<div id="header"></div>
<div id="leftnav"></div>
<div id="rightnav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>

ray73864
1 Jun 2007, 11:42 PM
Nevermind, worked the whole thing out, i used the feed-viewer.js file as a basis for how to capture the 'click' event for an 'a href' tag.

Final JS Code (additions in bold):



var Simple = function() {
var northPanel, southPanel, eastPanel, westPanel, centrePanel;
// Hypertext Reference universal handler
var linkClicked = function(e) {
// find the "a" element that was clicked
var a = e.getTarget('a');

if (a) {
e.preventDefault();
Simple.loadLink(a.href);
}
}
return {
init : function() {
var LeftNavigation = Ext.get('leftnav');
LeftNavigation.on('click', linkClicked);
var mainLayout = new Ext.BorderLayout(document.body, {
north: { split: false, initialSize: 92 },
south: { split: false, initialSize: 65 },
east: { split: false, initialSize: 160 },
west: { split: false, initialSize: 160 },
center: { }
});
mainLayout.beginUpdate();
mainLayout.add('north', northPanel = new Ext.ContentPanel('header', { fitToFrame: true, closable: false }));
mainLayout.add('south', southPanel = new Ext.ContentPanel('footer', { fitToFrame: true, closable: false }));
mainLayout.add('east', eastPanel = new Ext.ContentPanel('rightnav', { fitToFrame: true, closable: false }));
mainLayout.add('west', westPanel = new Ext.ContentPanel('leftnav', { fitToFrame: true, closable: false }));
mainLayout.add('center', centrePanel = new Ext.ContentPanel('content', { fitToFrame: true }));
mainLayout.endUpdate();

northPanel.setContent('<center><img src="images/stfbanner1.jpg" style="border: 0x solid #000" alt="Star Trek: Foundations MUSH" /></center>');

// Set the panels to a URL
southPanel.setUrl('footer.html');
westPanel.setUrl('left-navigation.html');
eastPanel.load('right-navigation.html');
// Refresh the East, West and South panels
westPanel.refresh();
southPanel.refresh();
eastPanel.refresh();
},
loadLink : function(link) {
centrePanel.setUrl(link);
centrePanel.refresh();
}
};
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);


Firebug also pointed me to the fact that i was putting my 'rightnav' into the 'west' column instead of the east column