Window isn't show after hide

[talha06]

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:

Utility Function for CapsLock check

ExtUtil.isCapsLock = 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;


};

Controller

Ext.define('AppName.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();
            console.log(win); // everything is OK
        } else {
            win.hide();
            console.log(win); // everything is OK
        }
    }
});

Console Log out for win variable (window itself)

afterRenderEvents: Object
autoGenId: true
autoHideDelay: 300
body: constructor
closable: false
closeAction: "hide"
collapseDirection: "top"
componentCls: "x-window"
componentLayout: constructor
componentLayoutCounter: 3
container: constructor
dockedItems: constructor
el: constructor
events: Object
floatParent: undefined
floating: true
focusEl: constructor
frame: true
hasListeners: HasListeners
header: constructor
hidden: false
hiddenAncestor: false
hiddenOnCollapse: constructor
id: "capslocknotification-1038"
initialCls: "ux-notification-window"
initialConfig: Object
isHiding: false
items: constructor
lastBox: Object
layout: constructor
layoutCounter: 3
loader: null
managedListeners: Array[1]
manager: Object
managerAlignment: "b-t"
mons: Array[0]
paddingFactorX: 0
paddingFactorY: 1
plugins: undefined
position: "t"
protoEl: null
readyToHide: false
renderData: Object
renderSelectors: Object
rendered: true
resizer: constructor
showOnParentShow: false
siblingAlignment: "t-t"
slideBackAnimation: "easeIn"
slideBackDuration: 500
slideInDuration: 500
stateEvents: Array[0]
stateId: undefined
tools: Array[0]
ui: "default"
useXAxis: 0
x: 578
xPos: -10000
y: 138
yPos: 10
zIndexManager: constructor
zIndexParent: undefined
__proto__: TemplateClass

[glafrance]

I'm a bit of a newbie with ExtJS, but as far as I know, you initially hide or show a component using:

hidden: true (or false)

And then later show or hide with setVisible(true) (or false)

Hope this helps.

[skirtle]

What is actually happening? Are you seeing any error messages? Have you included logging to confirm which parts of the code are getting hit?

Does getCapsLockNotification simply return this.capsLockNotification?

This line looks suspicious:

if (ExtUtil.isCapsLock(eOpts)) {

Is that really eOpts (the listener options) or is it the event object (usually referred to as e or ev, not eOpts)? Bit difficult to work out because you haven't told us how that method is called (or which event calls it, if applicable). Seems an odd way to check for caps lock too, rather than just checking the key code.

[raphaelhbohrer]

Here is a example to how show a window after hide:

in controller:

show: function(btn){
        var window = Ext.getCmp('id_window');
        if(window){
            window.show();
        }else{
            console.log('window?');
           //create window
        }
}

[talha06]

What is actually happening? Are you seeing any error messages? Have you included logging to confirm which parts of the code are getting hit?

Does getCapsLockNotification simply return this.capsLockNotification?

This line looks suspicious:

if (ExtUtil.isCapsLock(eOpts)) {

Is that really eOpts (the listener options) or is it the event object (usually referred to as e or ev, not eOpts)? Bit difficult to work out because you haven't told us how that method is called (or which event calls it, if applicable). Seems an odd way to check for caps lock too, rather than just checking the key code.

First of all, thank for your care.

Well, there's no error at console. When I log window, there's no problem. But I'm not able to see it. I tried to reach window by its id, it's still same, all properties are true, but it is not shown.. I added console.log for win too..

Regarding the code, I updated first post. Simple I call handleCapsLock function on each keypress. Then I control whether the caps lock is on or off by using isCapsLock function. (I added it too into first post.)

[skirtle]

The most important thing to establish in your logging is which code path is being hit, like this:

if (ExtUtil.isCapsLock(eOpts)) {
    win.show();
    console.log('showing');
} else {
    win.hide();
    console.log('hiding');
}

I suspect what you'll find is that it isn't hitting the code for showing.

[talha06]

@skirtle
tested it, getting right logs..

[skirtle]

Check the window's el just after you show it. Try to establish why it isn't visible (is it positioned off screen, z-index, visibility, display, ...).