1. #1
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    7
    abierbaum is on a distinguished road

      0  

    Default Unanswered: Detecting when component.hide() completes

    Unanswered: Detecting when component.hide() completes


    I am writing a ST2 application where I need to allow the user to toggle on/off the display of a panel in the UI. I am using a button that toggles on selection. When the user clicks the button it calls show() on the panel and when they click it again it calls hide() on the panel. The show/hide of the panel is animated using slideIn/slideOut.

    This all works fine except when the user hits the button again quickly while the animation is still in progress for the panel. When a show is in progress and I call hide() before it is done, the hide takes over the the animation proceed to hide the panel. But when the opposite happens and I call show() while the panel is still hiding, the show is ignored and the panel stays hidden.

    My current best idea is to solve it by disabling the button until the hide animation is complete. Problem is that I can't find a way to determine this. There is no completion callback on hide() or show() that I can tell.

    Does anyone know how I can solve this problem and/or get a callback when hide/show completes?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Have you tried the hiddenchange event?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    7
    abierbaum is on a distinguished road

      0  

    Default


    I tried hiddentchange, and it doesn't work correctly for my case. It is fired immediately on the change in hidden state (ie. start of the animation)

    I hooked up an event spy to the component to look at all the events and what I see is:

    - When hiding the panel, there is a hiddenchange event immediately and a hide event late. Not sure if this is after the animation completes, but it looks like it is.

    - But when showing the panel hiddenchange and show events both happen at the start of the animation.

    So I have a potential solution for hiding, but no solution for showing.

    I was hoping there may be some undocumented parameters I could send to show/hide as animation configuration options that would call a callback when the animation is completed. I searched through the animation source code and I can't quite determine if there is a way to do it.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Did you try with order after?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    7
    abierbaum is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Did you try with order after?
    Just getting back to this, and no I haven't tried after. I really didn't know it existed or how to use it. Are their some examples somewhere that describe how this works? I checked the event guide [1] and didn't see anything about it. I would love to know more about it as I have been trying to decipher some code lately that this may explain.

    For example the implementation of Component.show [2]. I can't quite figure out what the this.onBefore({...}) block is doing or how it is doing it.

    Any points you can provide are greatly appreciated.

    [1] http://docs.sencha.com/touch/2-1/#!/guide/events
    [
    2] http://docs.sencha.com/touch/2-1/sou...nt-method-show

Thread Participants: 1