1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    49
    Answers
    2
    Vote Rating
    3
    svendahlstrand is on a distinguished road

      0  

    Default Answered: Avoiding "double taps" for NavigationView

    Answered: Avoiding "double taps" for NavigationView


    Hello!

    When my app is started the user is greeted by an "intro view" in a NavigationView, see the attached wireframe. When the user taps the Help or Settings button the correct view are pushed. When the user taps anywhere else on screen, the Browser view is showed by switching the active item on Ext.Viewport.

    Now to my problem: if the user is fast she can dubbel tap and for example both push the Help view and show the Browser view at the same time.

    How do I avoid that?

    My handlers in the controller:

    Code:
      goToHelp: function () {
        this.getIntro().push({
          title: I18n.t('help'),
          xtype: 'help'
        });
      },
    
    
      goToBrowser: function () {
        Ext.Viewport.setActiveItem(1);
      }

  2. I went with Observable#suspendEvents() and Observable#resumeEvents(). Not elegant but at least it works. Thanks for your help guys!

  3. #2
    Sencha User xereta's Avatar
    Join Date
    Jul 2012
    Location
    Brazil
    Posts
    23
    Vote Rating
    0
    xereta is on a distinguished road

      0  

    Default


    You could try to use a Loader while changing the page

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    49
    Answers
    2
    Vote Rating
    3
    svendahlstrand is on a distinguished road

      0  

    Default


    Thats one solution, thanks! Is there another way though? I don't like the visual appearance of a loader that shows for half a second.

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Location
    England
    Posts
    135
    Answers
    11
    Vote Rating
    7
    george.m is on a distinguished road

      0  

    Default


    Remove the listeners from the other components then.

  6. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    49
    Answers
    2
    Vote Rating
    3
    svendahlstrand is on a distinguished road

      0  

    Default


    I went with Observable#suspendEvents() and Observable#resumeEvents(). Not elegant but at least it works. Thanks for your help guys!

  7. #6
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Answers
    6
    Vote Rating
    2
    azamatoak is on a distinguished road

      0  

    Default


    Can you provide a code sample on how you did this?

  8. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    49
    Answers
    2
    Vote Rating
    3
    svendahlstrand is on a distinguished road

      0  

    Default


    Sure, something like this:

    Code:
    Ext.define('foobar.controller.Navigation', {
      extend: 'Ext.app.Controller',
    
    
      config: {
        refs: {
          intro: 'intro',
          welcome: 'welcome',
          helpButton: '#helpButton'
        },
    
    
        control: {
          intro: {
            show: 'listenForTaps',
            back: 'listenForTaps'
          },
          helpButton: {
            tap: 'goToHelp'
          },
          welcome: {
            tapped: 'goToBrowser'
          }
        }
      },
    
    
      goToHelp: function () {
        ignoreTaps();
    
    
        this.getIntro().push({
          title: 'Help',
          xtype: 'help'
        });
      },
    
    
      goToBrowser: function () {
        ignoreTaps();
    
    
        Ext.Viewport.setActiveItem(1);
      },
    
    
      ignoreTaps: function () {
        this.getWelcome().suspendEvents();
        this.getHelpButton().suspendEvents();
      },
    
    
      listenForTaps: function () {
        this.getWelcome().resumeEvents();
        this.getHelpButton().resumeEvents();
      }
    });