"west region" and "center region" in border layout problem!!

**carzheng** · 24 Feb 2008 11:52 PM

How to implement "west region" and "center region" use the same scrollbar in border layout?
If it can't implement. hava any way to Substitute it?

code:
<html>
<head>
<title>Complex Layout</title>
<META http-equiv=Content-Type content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="Portal.js"></script>
<script type="text/javascript" src="PortalColumn.js"></script>
<script type="text/javascript" src="Portlet.js"></script>
<link rel="stylesheet" type="text/css" href="portal.css" />
<link rel="stylesheet" type="text/css" href="tasks.css" />
<link rel="stylesheet" type="text/css" href="sample.css" />
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>

<script type="text/javascript">
var quickSearch = new Ext.Panel({
frame:true,
title: 'Quick Search',
collapsible:true,
contentEl:'QuickSearch',
titleCollapse: true
});

var links = new Ext.Panel({
frame:true,
title: 'Links',
collapsible:true,
contentEl:'Links',
titleCollapse: true
});

var custom = new Ext.Panel({
frame:true,
title: 'Custom',
collapsible:true,
contentEl:'Custom',
titleCollapse: true
});

var customGrouping= new Ext.Panel({
frame:true,
title: 'Custom Grouping',
collapsible:true,
contentEl:'CustomGrouping',
titleCollapse: true
});

var actionPanel = new Ext.Panel({
id:'action-panel',
region:'west',
split:true,
collapsible: true,
collapseMode: 'mini',
width:210,
minWidth: 150,
border: false,
baseCls:'x-plain',
items: [quickSearch, links, custom, customGrouping]
});

var centerPanel = new Ext.Panel({
region:'center',
defaults: { bodyStyle:'padding:2px'},
//autoScroll : true,
items: [
{
title: 'Demo 1',
tools:tools,
html:'bb '
},
{
title: 'Demo 2',
tools:tools,
html:'bb '
},
{
title: 'Demo 2',
tools:tools,
html:'bb '
}
]
});

var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:32
}),
{
region:'center',
//layout: 'border',
autoScroll : true,
html: 'xxxx'
/*
items: [
{
region:'center',
autoScroll : true,
items: [
{
region: 'center',
layout: 'border',
//html: 'xxxx'
items: [actionPanel, centerPanel]
}
]
}
]
*/
//items: [actionPanel, centerPanel]
}
]
});
});
</script>
</head>

<body>
<script type="text/javascript" src="../examples.js"></script>

<ul id="QuickSearch" class="x-hidden">
<li>
<table>
<tr>
<td>
<select>
<option>crm.u0000003</option>
<option>crm.u0000008</option>
<option>crm.u0000009</option>
<option>crm.u0000002</option>
<option>crm.u0000019</option>
</select>
</td>
</tr>
<tr>
<td nowrap="yes">
<input type=text/>   <button>Go</button>
</td>
</tr>
</table>
</li>
</ul>
<ul id="Links" class="x-hidden">
<li id="new-task">
<img src="images/s.gif" class="icon-edit"/>
<a id="action-new" href="#">Add a new task</a>
</li>
<li style="display:none;">
<img src="images/s.gif" class="icon-complete"/>
<a id="action-complete" href="#">Mark selected tasks completed</a>
</li>
<li style="display:none;">
<img src="images/s.gif" class="icon-active"/>
<a id="action-active" href="#">Mark selected tasks active</a>
</li>
<li style="display:none;">
<img src="images/s.gif" class="icon-delete"/>
<a id="action-delete" href="#">Delete selected tasks</a>
</li>
</ul>
<ul id="Custom" class="x-hidden">
<li>
<img src="images/s.gif" class="icon-by-date"/>
<a id="group-date" href="#">By Date</a>
</li>
<li>
<img src="images/s.gif" class="icon-by-category"/>
<a id="group-cat" href="#">By Category</a>
</li>
<li>
<img src="images/s.gif" class="icon-no-group"/>
<a id="no-group" href="#">No Grouping</a>
</li>
</ul>
<ul id="CustomGrouping" class="x-hidden">
<li>
<img src="images/s.gif" class="icon-by-date"/>
<a id="group-date" href="#">By Date</a>
</li>
<li>
<img src="images/s.gif" class="icon-by-category"/>
<a id="group-cat" href="#">By Category</a>
</li>
<li>
<img src="images/s.gif" class="icon-no-group"/>
<a id="no-group" href="#">No Grouping</a>
</li>
<li>
<img src="images/s.gif" class="icon-by-date"/>
<a id="group-date" href="#">By Date</a>
</li>
<li>
<img src="images/s.gif" class="icon-by-category"/>
<a id="group-cat" href="#">By Category</a>
</li>
<li>
<img src="images/s.gif" class="icon-no-group"/>
<a id="no-group" href="#">No Grouping</a>
</li>
<li>
<img src="images/s.gif" class="icon-by-date"/>
<a id="group-date" href="#">By Date</a>
</li>
<li>
<img src="images/s.gif" class="icon-by-category"/>
<a id="group-cat" href="#">By Category</a>
</li>
<li>
<img src="images/s.gif" class="icon-no-group"/>
<a id="no-group" href="#">No Grouping</a>
</li>
<li>
<img src="images/s.gif" class="icon-by-date"/>
<a id="group-date" href="#">By Date</a>
</li>
<li>
<img src="images/s.gif" class="icon-by-category"/>
<a id="group-cat" href="#">By Category</a>
</li>
<li>
<img src="images/s.gif" class="icon-no-group"/>
<a id="no-group" href="#">No Grouping</a>
</li>
</ul>

<div id="north">
<TABLE id=pageHeaderId99999 height=0 cellSpacing=0 cellPadding=0 width="100%" background=hdrbgrd.jpg border=0>
<tr> <td width="10px"> <img src="Austar-logo-01-80x47.gif"/> </td> </tr>
</TABLE>
</div>
<div id="center2"> </div>
</body>
</html>

**Condor** · 25 Feb 2008 12:02 AM

You could listen for the scroll event of the body of each panel and synchronise the scrollOfset of both elements.
Another option would be to replace the border layout with a column layout (less features, but scrolling works standard).

**carzheng** · 25 Feb 2008 12:20 AM

Originally Posted by Condor

You could listen for the scroll event of the body of each panel and synchronise the scrollOfset of both elements.
Another option would be to replace the border layout with a column layout (less features, but scrolling works standard).

Border layout work! Thank you very much!

"west region" and "center region" in border layout problem!!

Thread Tools

Search Thread

Display

"west region" and "center region" in border layout problem!!

"west region" and "center region" in border layout problem!!