coldfiltered
12 Apr 2007, 5:51 PM
I'm experimenting with one of the examples - Layouts - Complex Layout
The only changes I've made is to the script locations and moving the page css and javascript blocks to separate files.
I came across a bit of odd behaviour - when you close the center panels 'close me' tab, the scroll bar on the remaining center tab no longer scrolls the text using IE 7.0.5730.11!
My experimental page was originally a .aspx page, so the form viewstate was added automatically.
Remove this ViewState div from the code below and it works okay!:
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA1NDkzNTkwMmRkSkgMb+dqJgB82spc9l+9/FYdypQ=" />
</div>
Can this be fixed?
Page Source:
<!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 runat="server">
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="ScriptLibrary/extJS/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="Default.css" />
<script type="text/javascript" src="ScriptLibrary/extJS/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="ScriptLibrary/extJS/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="ScriptLibrary/extJS/ext-all.js"></script>
<script type="text/javascript" src="Default.js"></script>
</head>
<body>
<form name="pageForm" method="post" action="Default.aspx" id="pageForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA1NDkzNTkwMmRkSkgMb+dqJgB82spc9l+9/FYdypQ=" />
</div>
<div id="container">
<div id="west" class="x-layout-inactive-content">
Hi. I'm the west panel.
</div>
<div id="north" class="x-layout-inactive-content">
north - generally for menus, toolbars and/or advertisements
</div>
<div id="autoTabs" class="x-layout-inactive-content">
The layout manager will automatically create and/or remove the TabPanel component
when a region has more than one panel. Close one of my panels and you can see what
I mean.
</div>
<div id="center2" class="x-layout-inactive-content">
<p>
<a href="#" onclick="Example.toggleWest(this);return false;">Show West Region</a></p>
<p>
My closable attribute is set to false so you can't close me. The other center panels
can be closed.</p>
<p>
The center panel automatically grows to fit the remaining space in the container
that isn't taken up by the border regions.</p>
<hr/>
<p>
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>
<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>
<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>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum
pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium
magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla.
Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus,
lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc,
eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec
pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<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>
<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>
<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>
<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="center1" class="x-layout-inactive-content">
<p>
<b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<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>
<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>
<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>
<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="props-panel" class="x-layout-inactive-content" style="width: 200px; height: 200px;
overflow: hidden;">
</div>
<div id="south" class="x-layout-inactive-content">
south - generally for informational stuff, also could be for status bar
</div>
</div>
</form>
</body>
</html>
The only changes I've made is to the script locations and moving the page css and javascript blocks to separate files.
I came across a bit of odd behaviour - when you close the center panels 'close me' tab, the scroll bar on the remaining center tab no longer scrolls the text using IE 7.0.5730.11!
My experimental page was originally a .aspx page, so the form viewstate was added automatically.
Remove this ViewState div from the code below and it works okay!:
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA1NDkzNTkwMmRkSkgMb+dqJgB82spc9l+9/FYdypQ=" />
</div>
Can this be fixed?
Page Source:
<!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 runat="server">
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="ScriptLibrary/extJS/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="Default.css" />
<script type="text/javascript" src="ScriptLibrary/extJS/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="ScriptLibrary/extJS/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="ScriptLibrary/extJS/ext-all.js"></script>
<script type="text/javascript" src="Default.js"></script>
</head>
<body>
<form name="pageForm" method="post" action="Default.aspx" id="pageForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA1NDkzNTkwMmRkSkgMb+dqJgB82spc9l+9/FYdypQ=" />
</div>
<div id="container">
<div id="west" class="x-layout-inactive-content">
Hi. I'm the west panel.
</div>
<div id="north" class="x-layout-inactive-content">
north - generally for menus, toolbars and/or advertisements
</div>
<div id="autoTabs" class="x-layout-inactive-content">
The layout manager will automatically create and/or remove the TabPanel component
when a region has more than one panel. Close one of my panels and you can see what
I mean.
</div>
<div id="center2" class="x-layout-inactive-content">
<p>
<a href="#" onclick="Example.toggleWest(this);return false;">Show West Region</a></p>
<p>
My closable attribute is set to false so you can't close me. The other center panels
can be closed.</p>
<p>
The center panel automatically grows to fit the remaining space in the container
that isn't taken up by the border regions.</p>
<hr/>
<p>
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>
<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>
<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>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum
pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium
magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla.
Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus,
lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc,
eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec
pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<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>
<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>
<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>
<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="center1" class="x-layout-inactive-content">
<p>
<b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<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>
<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>
<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>
<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="props-panel" class="x-layout-inactive-content" style="width: 200px; height: 200px;
overflow: hidden;">
</div>
<div id="south" class="x-layout-inactive-content">
south - generally for informational stuff, also could be for status bar
</div>
</div>
</form>
</body>
</html>