Animation in afterShow can be too soon

Hi Eirik

I've run into a problem using the notification window. I want to share my workaround in case it's useful for others.

The content of my popup window is a label control and a grid arranged in a vbox layout. I want the window to size dynamically to the content and I want the window to emerge from the bottom. The problem I've had is that the notification window computes the offsets required for the animation in 'afterShow'.

If the window layout is the default 'auto' this is fine because the correct window height has been computed by the time the window is show. However, if the content is dependent upon the layout engine then by the time afterShow is called, the height will be whatever initial minimal height ExtJS uses (zero or minHeight for example).

My solution is to move the code in 'afterShow' to new function 'doAnimation' which is called from 'afterLayout'. Now this is not the whole story in a couple of ways.

One is that 'afterLayout' is fired repeatedly but only once after 'afterShow' So the trick is to record the show event in 'afterShow' and arrange that the code in 'afterLayout' executes only once after the window has been shown (see the code snippet below).

The other issue is that 'afterLayout' is only called if a layout is used. By default the notification window does not use a layout so the 'auto' layout is used. In this case 'autoLayout' is not called after 'afterShow'. If the only place 'doAnimation' is called is in 'afterLayout' then the window will never appear. This means 'doAnimiation' should be called from 'afterShow' if this.getLayout().$className == 'Ext.layout.container.Auto' or from 'afterLayout' otherwise.

The only other wrinkle is that when doAnimation is called from afterLayout, the windows does not seem to be active. To address that I've added a call to setActive();

This change works for me in the narrow case of my scenario and is not tested to work in all scenarios. However, the relevant code change in my implementation of the notification window can be shown like this:

Social coding

Hello Eirik,
Thanks for the great extension!

One proposal to share the code of this great ux in any social coding places like github, making future developing easier and of course collaboration with the community.
I've found that you've joined the github (https://github.com/EirikLorentsen) will be great to move development there.

Erik, great work on this. But I thought I'd ask about an issue that seems to have popped up in 4.2.1. When a Notification is rendered, it starts off in the top right (if I've set it to TR of course), but then jumps to the center of the screen, and then animates from screen center back up to the top right. I assume something changed in 4.2.1 either in the CSS or maybe in how relative X/Y are calculated or something. Before I dive in over my head to try and see if I can figure it out, I figured I'd ask if you've seen this or had any ideas. Was hoping maybe it's something you'd be able to identify quickly since you're so familiar with the code. If not, I plan to try and dig in and see if I can figure out what's changed.

I think I found it. For some reason, it looks like the actual x and y isn't being set initially on the window (and probably its underlying El?). I force these to be set in the beforeShow() handler, just before the call to me.el.animate() by adding this:

problem with extjs v.4.2.1

i have problems with version ExtJs. v.4.2.1 ..the window notification show on top, but no show the window complete, only one section of window.... when i use extjs v .4.1 work fine... but with version. 4.2.1 not work.... one suggestion for fix the problem?

Scorpie: There should be no problem using themes. The basic plugin does not modify any markup. The notifications are identical to windows in that respect.
However my alternative styling in the demo might look a bit off because it is modifying the css of the base theme. But if you are using the Neptune theme you probably don't want to use the alternative styling anyway..