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:

afterShow: function () {

    if (this.getLayout().$className === 'Ext.layout.container.Auto')
        this.shown = true;


afterLayout: function() {

    var me = this;
    if (!me.shown) return;
    delete this.shown;



doAnimation: function() {
    // The rest of the 'afterShow' code appears here...