1. #1
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Answers
    8
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default Unanswered: Window isn't show after hide

    Unanswered: Window isn't show after hide


    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
    Code:
    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
    Code:
    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)
    Code:
    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
    Last edited by talha06; 7 Nov 2012 at 4:31 AM. Reason: updated code
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default


    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.

  3. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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:

    Code:
    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.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    15
    Vote Rating
    0
    raphaelhbohrer is on a distinguished road

      0  

    Default


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

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

  5. #5
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Answers
    8
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    Quote Originally Posted by skirtle View Post
    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:

    Code:
    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.)
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


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

    Code:
    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.

  7. #7
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Answers
    8
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    @skirtle
    tested it, getting right logs..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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, ...).