PDA

View Full Version : BorderLayout not found



John
4 Jan 2007, 6:55 AM
Can't get border layout to work. I can't find any occurance of BorderLayout in any of the yui-ext or yahoo ui javascript files included in the library. The browser error says "Object Expected", and point to the line of code. Border layouts do work in this browser because the examples work.



var layout = new YAHOO.ext.BorderLayout(document.body,
{
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
autoScroll: false
}
});

BernardChhun
4 Jan 2007, 7:04 AM
Hey John,

please post your whole html as nothing seems to be wrong here. for your information, in my yui-ext.js file, BasicDialog is declared on line 833.

cheers,

Bernard

John
4 Jan 2007, 7:12 AM
Here is the exact code. The only thing I changed is the resource URLs for script and css. This is the example for nested layout found at http://www.yui-ext.com/deploy/yui-ext/examples/layout/nested.html

not sure why it wouldn't work.



<html>
<head>
<title>Complex Layout</title>

<script type="text/javascript" src="lib/yahooUI/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui-ext.js"></script>

<link rel="stylesheet" type="text/css" href="lib/resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="lib/resources/css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="lib/resources/css/layout.css"/>
<style type="text/css">
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
#header{
background: url(images/header-bar.gif) repeat-x bottom;
border-bottom: 1px solid #083772;
padding:5px 4px;
}
#footer{
background: url(images/header-bar.gif) repeat-x bottom;
border-top: 1px solid #083772;
padding:2px 4px;
color:white;
font:normal 8pt arial,helvetica;
}
#nav {
}
#nav, #inner1, #inner2 {
padding:10px;
}
#content p {
margin:5px;
}
#nav li {
padding:2px;
padding-left:10px;
background-image:url(images/bullet.gif);
background-position: -3px 6px;
background-repeat: no-repeat;
font-size:8pt;
display: block;
}
.ylayout-panel-north, .ylayout-panel-south, #content .ylayout-panel-center{
border:0px none;
}
#content .ylayout-panel-south{
border-top:1px solid #aca899;
}
#content .ylayout-panel-center{
border-bottom:1px solid #aca899;
}
</style>
<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new YAHOO.ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 200,
titlebar: true,
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
autoScroll: false
}
});
layout.beginUpdate();

layout.add('west', new YAHOO.ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
var innerLayout = new YAHOO.ext.BorderLayout('content', {
south: {
split:true,
initialSize: 200,
minSize: 100,
maxSize: 400,
autoScroll:true,
collapsible:true,
titlebar: true
},
center: {
autoScroll:true
}
});
innerLayout.add('south', new YAHOO.ext.ContentPanel('inner1', "More Information"));
innerLayout.add('center', new YAHOO.ext.ContentPanel('inner2'));
layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout));
layout.endUpdate();
}
}

}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body class="ytheme-gray">
<div id ="container">
<div id="nav" class="ylayout-inactive-content">
<ul>
/blog/images/icons/yahoo.gifYahoo! UI Library (http://developer.yahoo.com/yui/)
/blog/images/icons/ajaxian.gifAjaxian.com (http://www.ajaxian.com/)
[/list]
</div>
<div id="content" class="ylayout-inactive-content"></div>
<div id="inner1" class="ylayout-inactive-content">


This layout uses the gray theme. To make a layout use the gray theme, add the class .ytheme-gray to the body or a container element.</p>


Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>


Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>


Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>


Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="inner2" class="ylayout-inactive-content">


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>


Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>


Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
</div>
</div>
</body>
</html>

Animal
4 Jan 2007, 7:16 AM
Use Firebug to check whether the scripts you include are actually being served.

BernardChhun
4 Jan 2007, 7:20 AM
hey John,

I just tried your code and it wasn't working at first. I changed the css links and then bam! there you go.

My yui-ext file is quite recent so what is your yui-ext.js file version?

Bernard