PDA

View Full Version : [Solved] accordion full height inside other panel



mdissel
22 Nov 2007, 1:13 PM
Solved, code is updated to reflect the solution.
===
In the west panel i've got two panels, the top one (search) with a fixed height, the accordion should take the rest of the space.. How can i configure this?

This is the code and see attachment.


Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
defaults: {
autoScroll: true,
},
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 200,
layout:'border',
split: true,
items:[
{
region: 'north',
title:'Search',
height: 84,
border : false
},
{
region: 'center',
title:'Navigation',
layout: 'accordion',
border:false,
layoutConfig: {
animate: true,
titleCollapse: true
},
items:[
{title:'Favorites'},
{title:'Recently Used'},
{title:'Folders'}
]
}
]
}, {
region: 'center',
xtype: 'tabpanel',
activeItem:0,
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}]
});
});

damien
22 Nov 2007, 1:24 PM
I am not sure but you can try layout:'fit' in the WEST region. Look at FitLayout in the doc's.

mdissel
22 Nov 2007, 1:29 PM
I already tried that, because that seem the logical solution, but it's not working.. The Search panel has the full height, scrollbar is shown and somewhere below is the accordion panel

efege
22 Nov 2007, 1:47 PM
Give layout: 'border' to your west region. Then, within this new BorderLayout, Search has region: 'north', and Navigation has region: 'center'. Tested and working here. :)

mdissel
22 Nov 2007, 1:52 PM
Confirmed! I've updated the code in the first post

Thanks

Marco