Window deactivate event not firing

[metalinspired]

Hi,

While trying to implement a simple taskbar into my application I noticed that deactivate event doesn't fire.
I create two windows and when I click on one of them it will fire activate event but the other one won't fire deactivate event.
Is this a bug or am I missing something?

[luisparada]

Please post some code to see the what's going on... maybe you are missing something.

[scottmartin]

You should use blur:

Ext.create('Ext.window.Window', {
    title: 'Window 1',
    height: 200,
    width: 400,
    layout: 'fit',
    html: 'click me to blur that other window!',
    listeners: {
        el: {
            blur: function() {
                console.log('window 1 is all blurry')
            }
        }
    }
}).show();

Ext.create('Ext.window.Window', {
    title: 'Window 2',
    height: 200,
    width: 400,
    layout: 'fit',
    html: 'click me to blur that other window!',
    listeners: {
        el: {
            blur: function() {
                console.log('window 2 is all blurry')
            }
        }
    }
}).show();

Scott.

[metalinspired]

I should have mentioned that i already tried blur and it didn't work either.
Here is function that creates a button in taskbar and attaches needed events to button and window.

regWindow: function(win) {    
  var button = Ext.create('Ext.button.Button', {
    text: win.title,
    enableToggle: true,
    pressed: true,
    
    initComponent: function() {
      
      var me = this;
      
      me.on('toggle', function(el, pressed) {
        if (pressed) {
          win.show();
        } else {
          win.hide();
        }
      });
      
      win.on({
        close: function() {
          me.destroy();
        },
        hide: function() {
          me.toggle(false, true);
        },
        activate: function() {
          me.toggle(true, true);
          console.log('focus');
        },
        deactivate: function() {
          me.toggle(false, true);
          console.log('blur');
        },
      });
    }
  });
    
  this.add(button);
},

[metalinspired]

I apologize for bumping the subject but des anyone have any advice?
Is it a bug or I'm missing something in my code?
Thank you

[scottmartin]

See where you use deactivate, but not blur. Are you focusing anything in the window?
Hard to tell since you only provided a snippet. Does my example work and can you provide a working test case of you setup?

Scott.

[metalinspired]

I have just tried and, unfortunately, doesn't work.
Still just fires focus.
I did manage to get what I want by adding for() to deactivate buttons for all other windows besides the one receiving the focus.

    regWindow: function(win) {        
        // Create button to represent window in taskbar
        var button = Ext.create('Ext.button.Button', {
            text: win.title,
            win: win,
            enableToggle: true,
            reorderable: true,
            
            initComponent: function() {
                
                var me = this;
                
                // Button events
                me.on({
                    click: function(el, e, opt) {
                        // pressed is inverted since it is set before click event
                        if (!el.pressed) {
                            el.win.hide();
                        } else {
                            if (el.win.isHidden()) {
                                el.win.show();
                            } else if (el.win != Ext.WindowManager.getActive()) {
                                el.win.show();
                            } else {
                                el.win.hide();
                            }
                        }
                        return false;
                    },
                    toggle: function() {
                        return false;
                    },
                });
                
                // Window events
                win.on({
                    close: function() {
                        me.destroy();
                    },
                    hide: function() {
                        me.toggle(false, true);
                    },
                    activate: function(el) {
                        me.toggle(true, true);
                        
                        /*
                         * Since deactivate event isn't firing this loop will emulate the behavior
                         */
                        for (var i=0; i < me.ownerCt.activeButtons.length; i++) {
                            if (me.ownerCt.activeButtons[i] != me) {
                                me.ownerCt.activeButtons[i].toggle(false, true);
                            }
                        }
                    },/*
                    deactivate: function() {
                        me.toggle(false, true);
                        console.log('blur');
                    },*/
                });
            }
        });
        
        /*
         * Array of buttons that represent windows in taskbar
         */
        this.activeButtons.push(button);
        
        // Add button to taskbar
        this.add(button);
    },

[metalinspired]

One more thing.
Don't know if it's going to be of any help, but I'm not using controllers to manage any of components being created.

[metalinspired]

I just noticed that deactivate event is firing when window is being hidden by hide() method.

[Nigel]

I've just noticed this problem as well while converting our app from v3.4 to v4.1.3. We are using Ext.WindowManager to manage windows in a desktop-like application. Previously (in v3.4), when a new window was added with its manager set, then its 'toFront' method (called from within its show method) would call the bringToFront method of the manager:

    toFront : function(e){
        if(this.manager.bringToFront(this)){
            if(!e || !e.getTarget().focus){
                this.focus();
            }
        }
        return this;
    },

Ultimately, the WindowManager's setActiveWin method gets triggered, which calls setActive(false) on the current 'front' window, which results in the deactivate event being fired. It then sets the 'front' window to the passed window and calls its setActive(true), which fires the activate event.

In ExtJS v4, Ext.WindowManager is different - it is just an instance of the new ZIndexManager, which doesn't include all the same methods as the old WindowManager (it has more generic use managing z-indexes in components including combo-boxes etc, but now lacks specific logic for managing windows).

I'd argue that it's a bug that the behaviour is not the same as in v3.4 - specifically that there is no actual WindowManager class that is specifically designed to manage multiple windows, including triggering the activate/deactivate events as per the equivalent in v3.4).

I'm looking at figuring out a manual workaround to get the deactivate event to fire - I'll update this thread if/when I figure that out.