Ext JS 4.1 - Window isn't show after hide

Question

I'm not able to show a window that is defined class-level after hiding it. I need to use show & hide it whenever it's necessary.

Here's what I've tried so far:

isCapsLock Utility function for caps lock on/off handling:

function(e) {

    e = (e) ? e : window.event;

    var charCode = false;
    if (e.which) {
        charCode = e.which;
    } else if (e.keyCode) {
        charCode = e.keyCode;
    }

    var shifton = false;
    if (e.shiftKey) {
        shifton = e.shiftKey;
    } else if (e.modifiers) {
        shifton = !!(e.modifiers & 4);
    }

    if (charCode >= 97 && charCode <= 122 && shifton) {
        return true;
    }

    if (charCode >= 65 && charCode <= 90 && !shifton) {
        return true;
    }

    return false;

}


Ext.define('MyApp.controller.LoginController', {
    extend      : 'Ext.app.Controller',
    views       : [ 'notification.CapsLockNotification' ],
    refs            : [{
       ref      : 'capsLockNotification',
       selector: 'capslocknotification'
    }],
    init        : function() {
             this.capsLockNotification = Ext.widget('capslocknotification');
             this.control({
                  'loginform #password' : {
                      keypress    : this.handleCapsLock
                   }
                 // control logic goes here
             });
    },
    handleCapsLock : function(field, eOpts) {
        var win = this.getCapsLockNotification();
        if(ExtUtil.isCapsLock(eOpts)) {
            win.show();
        } else {
            win.hide();
        }
    }
});

Can you show me your getCapsLockNotification() function? Also, does it shows you a warning?. I will be easier to track the error (if any) if you debug it with, let's say "firebug" — Carlos Valenzuela
it is generated by Ext using refs.. (updated first post; added refs) — talha06
Where is ExtUtil.isCapsLock coming from? Also how are you calling handleCapsLock? If your function appears to be hiding the window correctly, can you check that win.show(); is ever hit. — Jamie Sutherland
it's a function that handles caps lock on/off. I added it too into first post. — talha06
You haven't mentioned how handleCapsLock is called. That is critical since you are evaluating window hide/show based on the eOpts that are passed. What are the eOpts? Are there any additional options that you are passing in eOpts other that the standard ones. We need to know that. Also, we also need to know how ExtUtil.isCapsLock() handling exceptional cases. Is that working perfectly? — Varun Achar

chepike chepike · Accepted Answer · 2012-11-12T20:26:26

Check if the selector is returning the right component. Make the var win global: handleCapsLock : function(field, eOpts) { win = this.getCapsLockNotification(); if(ExtUtil.isCapsLock(eOpts)) { win.show(); } else { win.hide(); } } And open firebug console on firefox or the developers tools console on Chrome (both with CTRL + SHIFT + J) write in the console: console.info(win); console.info(win.$className); check if arenot undefined or null and the classname its correct

Ext JS 4.1 - Window isn't show after hide

1 Answers