PDA

View Full Version : Applying a scrollbar to the entire nested layout



gbenash175
11 Jun 2009, 7:31 AM
I'm new to extJS and have been working for a number of days on trying to create a scrollable nested layout. I'm trying to created a layout of {north, south, center: {west, center, east}}. I'd like a scroll bar that can scroll the entire nested layout of {west, center, east} (innerNestedLayouts). Every example I've found has a scroll bar for a region with a single panel. I can not find an example of a scroll bar for an entire nested layout.
Ext.onReady(function(){

Ext.QuickTips.init();

var innerNestedLayouts = {
layout:'border',
region: 'center',
autoScroll:true,
hideMode: Ext.isIE ? 'offsets' : 'display',
items: [{
title: 'West',
region: 'west',
collapsible: true,
width: 150,
minSize: 100,
maxSize: 350,
margins: '5 0 5 5',
cmargins: '5 5 5 5',
bodyStyle:'padding:10px;',
split: true
},{
title :'Center',
region: 'center',
contentEl:'mycustomscroll',
margins: '5 5 5 0'
},{
title: 'East',
region: 'east',
collapsible: true,
width: 150,
minSize: 100,
maxSize: 350,
margins: '5 0 5 5',
cmargins: '5 5 5 5',
bodyStyle:'padding:10px;',
split: true
}]
};

var southPanel = {
id: 'details-panel',
title: 'Details',
region: 'center',
bodyStyle: 'padding-bottom:15px;background:#eee;',
autoScroll: true
};

new Ext.Viewport({
layout: 'border',
title: 'Practising Nested Layout',
items: [{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30
},{
layout: 'border',
id: 'layout-browser',
region:'south',
border: false,
split:true,
margins: '2 0 5 5',
height: 30,
minSize: 100,
maxSize: 500,
items: [ southPanel]
},
innerNestedLayouts
],
renderTo: Ext.getBody()
});
});

Using firefox browser, I can briefly see the scrollbar when I klick on the collapsible button on the east panel. It seems to be over-shadowed by the collapsible eastpanel. Is there something that I'm doing wrong?

Any help would be greatly appreciated.

Thanks,
Franklin