PDA

View Full Version : expanding a panel on mouse over



toxkillfraex
22 Mar 2012, 2:55 AM
right now i have a panel defined as follows



var eastPanel = Ext.create('Ext.panel.Panel',
{
xtype: 'panel',

id: 'east-region',

layout: 'fit',
region: 'east',

width: '15%',
maxWidth: 90,

collapsible: true,
collapsed: true,
collapseMode: 'mini',

split: true, //collapse in correct direction

header : false // no title bar with collapse button

});


I was wondering if it was possible to make it expand when the mouse goes over the splitter or the mini expand button.
In turn I would want to make it collapse when the mouse leaves the panel or clicks in another window or panel.

However I can't seem to find any events in documentation that might help me do this.
Any ideas?

mitchellsimoens
22 Mar 2012, 7:07 AM
You would have to get the splitter, add a mouseover listener to it's element and expand the region

toxkillfraex
23 Mar 2012, 2:23 AM
You would have to get the splitter, add a mouseover listener to it's element and expand the region
you helped me on the way quite nicely some fiddling around got me with this


Ext.get('appBody').select('.x-splitter').addListener('mouseover',this.dockMouseOver);
Ext.get('appBody').select('#east-region-body').addListener('mouseleave', this.dockMouseOut);


I'm just a little worried I'm not being specific enough on the splitter. So I think it might cause troubles if another splitter gets in the viewport. (which is about to happen to be honest)

is there a better way to get a hold of the splitter?

EDIT:
yeah it just happened...

both splitters have the event.