View Full Version : Sliding event for a north region in a border

9 May 2011, 6:55 AM
On a border layout, how do I catch the sliding of the north region? Because I want to set a callback function on the sliding action (not the expanding). I've done some research but couldn't find a proper event for that. I tried setting an click event on the element created with the id: north panel id-xcollapsed that is hidden on the moment of the expanding, but didn't succeed (I guess it's not an extjs component). Show and hide actions are also not working because from what I've seen in the scripts, the north panel on sliding receives some Z-indexes and some other css properties for the sliding action, avoiding the show and hide event calls. Can someone please give me an idea about this, because I feel like I'm going in circles already. Thank you.

9 May 2011, 8:59 AM
See the collapse event of Ext.Panel.

9 May 2011, 10:44 PM
That's just it. It doesn't work with collapse. I made 2 screen shots for a better explaining the situation.
Case 1 is the case when the north panel is collapsed and the event catching that is as you said "collapse".
Case 2 is the case that I'm referring to. This when the north panel has a css Z-Index set bigger than the rest of the panels, and just hovers over the other panel(it does not expand down as case 1). This is the case when collapse event it is not triggered, and I don't know how to catch this event.

10 May 2011, 4:55 AM
Ok, I see what you mean. You're talking about a collapsed panel, where you click its title bar to temporarily slide the panel open.

Unfortunately, there are no events which directly correlate to the temporary show/hide of a collapsed panel.

I coded up a quick sample which listened for the activate, close, collapse, expand, hide, move and resize events; none of these events fired consistently during the temporary show/hide of the panel...

10 May 2011, 5:07 AM
Eventually I was able to get the title bar element and put a listener on it. But it is really tricky and headache giving. I was able to catch it on a 'afterlayout' listener of the north panel, but because i had several panels and more complicated stuff happening inside the listener was called several times (so I had to do some extra assuring that it was ok in the end: the collapsed element was rendered, and delete previous on click listeners set every time it was loaded).

The piece of code I worked so much for is below. Hope it helps other people. The listener is applied to the north panel.

listeners: {
'afterlayout': function (extComponent) {
if (typeof(extComponent.ownerCt.layout['north'].collapsedEl) != 'undefined') {
extComponent.ownerCt.layout['north'].collapsedEl.removeListener('click', someFunction);
extComponent.ownerCt.layout['north'].collapsedEl.addListener('click', someFunction);