Avoiding "double taps" for NavigationView

[svendahlstrand]

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:

  goToHelp: function () {
    this.getIntro().push({
      title: I18n.t('help'),
      xtype: 'help'
    });
  },


  goToBrowser: function () {
    Ext.Viewport.setActiveItem(1);
  }

[xereta]

You could try to use a Loader while changing the page

[svendahlstrand]

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.

[george.m]

Remove the listeners from the other components then.

[svendahlstrand]

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

[azamatoak]

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

[svendahlstrand]

Sure, something like this:

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();
  }
});