PDA

View Full Version : Slide panel with BorderLayout



fdm
23 Dec 2009, 5:17 AM
Hello,

I have a page structured with a layout 'border'. My west panel is collapsible.
By default, when I click on the titlebar when the west panel is collapsed, it slide out over the center panel.
I wish the same working on the 'mouseover' event.

Here, my west panel definition and my listener for the 'mouseover' event :

var west = new Ext.Panel({
region: 'west',
id: 'west-panel',
title: 'West',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
titleCollapse: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
},
items: [{
contentEl: 'west',
title: 'Navigation',
border: false,
iconCls: 'nav'
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
}]
});

Ext.get("west-panel-xcollapsed").on('mouseover', function(){
if (west.collapsed) {
west.slideOut();
}
});

This doesn't work. 'west.slideOut()' does anything.
Anyone see how do it ?

Condor
23 Dec 2009, 5:31 AM
var panel = Ext.getCmp('west-panel'),
region = panel.ownerCt.layout[panel.region];
region.getCollapsedEl().on('mouseenter', function(){
if (!panel.collapsed) {
region.slideOut();
}
});

fdm
23 Dec 2009, 6:09 AM
Oh ! thx a lot.

It's exactly that I need :).