PDA

View Full Version : Borderlayout skins in 0.40 svn don't show tabs or titles


kjordan
30 Dec 2006, 3:04 PM
So I checked out 0.40 and the first time a page comes up, the tabs and titles don't show up for borderlayout on anything but the center. The pin button still shows, and so if I contract them and then expand them, the tabs and titles show up.
Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/system/js/yui-ext-svn/resources/css/ytheme-ext.css" />
<link rel="stylesheet" type="text/css" href="/system/js/yui-ext-svn/resources/css/layout.css" />
<link rel="stylesheet" type="text/css" href="/system/js/yui-ext-svn/resources/css/tabs.css" />
<link rel="stylesheet" type="text/css" href="/system/js/yui-ext-svn/resources/css/ytheme-gray.css" />
<script src="/system/js/yui-testing/build/yahoo/yahoo-debug.js"></script>
<script src="/system/js/yui-testing/build/dom/dom.js"></script>
<script src="/system/js/yui-testing/build/event/event.js"></script>
<script src="/system/js/yui-testing/build/connection/connection.js"></script>
<script src="/system/js/yui-testing/build/animation/animation.js"></script>
<script src="/system/js/yui-testing/build/autocomplete/autocomplete.js"></script>
<script src="/system/js/yui-testing/build/dragdrop/dragdrop.js"></script>
<script src="/system/js/yui-testing/build/slider/slider.js"></script>
<script src="/system/js/yui-testing/examples/autocomplete/js/json.js"></script>
<script src="/system/js/yui-testing/build/container/container.js"></script>
<script src="/system/js/yui-ext-svn/yui-ext.js"></script>
<script src="/system/js/yui-ext-svn/build/Element-min.js"></script>
<script src="/system/js/yui-ext-svn/build/DomHelper-min.js"></script>
<script src="/system/js/yui-ext-svn/build/EventManager-min.js"></script>
<script src="/system/js/yui-ext-svn/build/widgets/BasicDialog-min.js"></script>
<script src="/system/js/yui-ext-svn/build/layout/BorderLayout-min.js"></script>
<script src="/system/js/yui-ext-svn/build/layout/ContentPanels-min.js"></script>
<script src="/system/js/yui-ext-svn/build/layout/LayoutManager-min.js"></script>
<script type="text/javascript" src="layout.js" />
</head>
<body>
<div id ="container">
<div id="west" class="ylayout-inactive-content">
West
</div>
<div id="west2" class="ylayout-inactive-content">
West
</div>
<div id="west3" class="ylayout-inactive-content">
West
</div>
<div id="west4" class="ylayout-inactive-content">
West
</div>
<div id="north" class="ylayout-inactive-content">
North
</div>
<div id="south" class="ylayout-inactive-content">
South
</div>
<div id="east" class="ylayout-inactive-content">
East
</div>
<div id="center" class="ylayout-inactive-content">
Center
</div>
</div>
</body>
</html>

Javascript:

Example = function(){
var layout;
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
titlebar: false
},
center: {
titlebar: true,
autoScroll:true,
split:true,
useShim:true
},
east: {
titlebar: true,
autoScroll:true,
split:true,
useShim:true,
collapsible: true,
animate:true,
initialSize: 100,
minSize: 100
},
west: {
titlebar: true,
autoScroll:true,
split:true,
useShim:true,
collapsible: true,
animate:true,
initialSize: 200,
minSize: 200,
resizeTabs:true
},
south: {
titlebar: true,
autoScroll:true,
split:true,
useShim:true,
collapsible: true,
animate:true,
initialSize: 50,
minSize: 50
}
});


layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('north', 'north'));
layout.add('east', new YAHOO.ext.ContentPanel('east', 'east'));
layout.add('center', new YAHOO.ext.ContentPanel('center', 'center'));
layout.add('west', new YAHOO.ext.ContentPanel('west', 'Navigation'));
layout.add('west', new YAHOO.ext.ContentPanel('west2', 'Actions'));
layout.add('west', new YAHOO.ext.ContentPanel('west3', 'Widgets'));
layout.add('west', new YAHOO.ext.ContentPanel('west4', 'Layout'));
layout.add('south', new YAHOO.ext.ContentPanel('south', 'south'));
layout.endUpdate();
}
}

}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
tryanDLS
30 Dec 2006, 4:53 PM
I can confirm this using a more reasonable set of includes (e.g. just yui-ext.js and yui-ext.css).
Another issue related to this is resizing regions via border dragging. They're not resizable and the resize handle doesn't appear til after the region is collapsed/expanded.
It's an issue without or without using a theme.
jack.slocum
31 Dec 2006, 2:21 AM
It was a bug. Should be fixed in SVN.
tryanDLS
31 Dec 2006, 9:28 AM
Tested with the latest code - looks good now.