Sencha Touch: durch Klicken auf ein button schnell drücken, eine Ansicht zweimal

Sagen, ich habe einen button, der löst ein Knopfdruck eine neue Ansicht.
Ich habe bemerkt, dass wenn ich es auf mehr als einmal, schnell genug ist, wird es schieben Sie die gleiche Ansicht zweimal.

Können Sie dieses Verhalten nachzuahmen und mit Hilfe Ihrer offiziellen docs auf dieser Seite, wo Sie ein live-Beispiel:
http://docs.sencha.com/touch/2-0/#!/guide/navigation_view

die klare Frage ist nur, wie es verhindern?

Haben Sie versucht, die Schaltfläche deaktivieren, während Sie die push-Funktion?
sicher, ich könnte spielen mit Lösungen wie diese, obwohl ich mir vorstellen, sollte es eine elegantere standardisierten Weg zur Arbeit mit Sencha.
Ja, durchaus möglich. Ich habe gegoogelt, einige aber und der Allgemeinen consense war zu deaktivieren, die Taste oder implementieren Sie eine timer-Logik. Wählen Sie, was pragmatischer ist, imo.
da Sie Ihre eigenen docs Spüle hat das Problem - denke ich nicht so, aber die ganz normal für uns, dass zu vermeiden flackern Veranstaltungen. Verwenden Sie eine timeout-oder 'deaktivieren -> push -> aktivieren', wie Alex sagte
Ich hatte das Gefühl, das wäre die einzige Lösung... es sei denn, etwas besseres kommt, ich akzeptiere diese Antwort. danke.
So, das drücken einer Taste zweimal bewirkt, dass der zugehörige event-handler, um das Feuer zweimal, und das ist ein problem für Sie?
Ein problem für die user, die vielleicht am Ende mit doppelten geschoben Ansichten (nachdem die Taste "zurück" - Taste zweimal, um eigentlich wieder zurück gehen, nur weil er es irgendwie geschafft, versehentlich drücken Sie die Taste während der animation, um die geschoben Ansicht), das ist schließlich ein problem für den Entwickler, also ja.

InformationsquelleAutor Alon Amir | 2012-07-17

Maskierung erfolgreich verhindert doppeltes Antippen problem.

In meinem code verwende ich zwei Funktionen für das maskieren/demaskieren navigation-container:

/**
 * Mask container with rolling wheel. Usually need if Ajax-request is sent to the server and app waiting for response
 * Best practice is masking the current navigator container, to prevent blocking whole app. Method warns if no container
     * is defined. In some cases warning could be suppress with parameter
     *
     * @param container
     * @param {boolean} [suppressWarning]
     */
    startLoading: function(container, suppressWarning) {
        var loadingComponent = container;

        if (!loadingComponent) {
            //<debug>
            if (!suppressWarning) {
                console.warn('Please define navigator container for non-blocking operation, or define suppressWarning parameter');
            }
            //</debug>
            loadingComponent = Ext.Viewport;
        }

//     var lastMaskedContainer = container;
        this.lastMaskedContainer = container;

        loadingComponent.setMasked({
            xtype: 'loadmask',
            message: 'Loading...'
        });

/*
        Ext.defer(function() {
            lastMaskedContainer.setMasked(false);
        }, Pipedrive.app.maskingTimeout * 1000)
*/
    },

    /**
     *
     * @param {Ext.Container} container
     * @param {boolean} [suppressWarning]
     */
    stopLoading: function(container, suppressWarning) {
        var loadingComponent = container;

        if (!loadingComponent) {
            //<debug>
            if (!suppressWarning) {
                console.warn('Please define either navigator container for non-blocking operation, or define suppressWarning parameter');
            }
            //</debug>
            loadingComponent = Ext.Viewport;
        }

        var alreadyMasked = loadingComponent.getMasked();

        var lastMaskedContainer = this.lastMaskedContainer;
        if (!alreadyMasked && !suppressWarning) {
            //<debug>
            if (lastMaskedContainer != container) {
                console.warn('Found Start/Stop Loading inconsistency. Please revise code'
                    + (container ? '. Container: ' + container.getId() : 'Ext.Viewport')
                    + (lastMaskedContainer ? ', last masked container: ' + lastMaskedContainer.getId() : '')
                );
            }
            //</debug>
            loadingComponent = Ext.Viewport;
        }
        loadingComponent.setMasked(false);
    }

als in der tap-handler:

onDealDetailsTap: function(ct) {
    console.log('onDealDetailsTap', ct);
    var form = ct.getReferenceForm(),
        navigatorContainer = this.getNavigatorContainer(form),
        model = form.getRecord();

    UiHelper.startLoading(navigatorContainer);
    Ext.Viewport.fireEvent('detailfields', {
        title: model.get('title'),
        id: model.get('id'),
        store: 'DealFields',
        navigatorContainer: navigatorContainer
    })
},

Bereinigung der laden-Maske:

control : {
    activitiesContainer: {
        push: 'onPushActivitiesContainer'
    },




onPushActivitiesContainer: function(ct) {
    //console.log('onPushActivitiesContainer', ct);
    UiHelper.stopLoading(ct);
},

vor allem ist es cool für das warten auf die lang-zeitlich ajax-Anfragen....

Cheers, Oleg

Tolle Antwort, die zimmerreserviereung, ohne das deaktivieren jedes 'tap' Hörer individuell. Danke.
Kann mir da jemand helfen? Ich habe versucht, schieben die nächsten Ansicht, dann knallen Sie es, und wenn ich versuchen, zu schieben, eine neue Sicht bekomme ich diesen Fehler: Uncaught TypeError: Cannot read property 'dom' of null . Ich bin mir auch nicht sicher über die fireEvent-Methode, also Tat ich dies: me.getNavigationView().push(view);

InformationsquelleAutor olegtaranenko

8

Andere Methode ist, um zu überprüfen, was die aktive Ansicht ist, und nur schieben, wenn es nicht die gleiche wie die Ansicht, die Sie über zu schieben. Ich habe diese getestet und es funktioniert.

E. g.
```
if (this.getNavigationView().getActiveItem().xtype != "someView") {
    this.getNavigationView().push({ xtype: "someView" });
}
```
InformationsquelleAutor jayteejee
6

Erweitern jayteejee Antwort, ich habe überschrieben, die push-Methode in einer benutzerdefinierten navigation Ansicht wie diese:
```
Ext.define('BT.navigation.View', {
   extend: 'Ext.navigation.View',
   xtype: 'btnavigationview',

   push: function (view) {
      if(this.getActiveItem().xtype != view.xtype)
         this.callParent(arguments);
      else
         console.warn("Prevented pushing a potentially duplicate view of xtype: " + view.xtype);
   }
});
```
Ich bin mir nicht ganz sicher, ob die xtype Annahme ist sicher genug, aber ich kann mir nicht vorstellen, dass es eine situation in meiner aktuellen app, der erforderlich wäre, eine Ansicht drücken einer anderen Ansicht des gleichen Typs auf die navigation stack. So, die Lösung funktioniert für mich, und es ist ziemlich ordentlich. Die Warnung ist da, um mich zu retten Kopfschmerzen später auf, und vielleicht ziehen meine Haare aus versuchen, herauszufinden, warum push würde nicht funktionieren!
- Wirklich saubere Lösung. Ich änderte Ihre if-Anweisung ein wenig aber: if (typeof this.getActiveItem() == 'undefined' || this.getActiveItem().xtype != view.xtype) im Fall gibt es keine aktive Element noch festlegen.
- Sollten Sie einen view.destroy(); um den else-block. Ansonsten die view-Instanz bleiben im Speicher, und langsam verlangsamen die app.
InformationsquelleAutor Merott
2

Nur auszusetzen, die Ereignisse auf die Schaltfläche, wenn Sie erschlossen und fortsetzen Sie, wenn die Ansicht geschoben
```
button.suspendEvents();
...
button.resumeEvents();
```
Ich glaube nicht, dass es einen anderen Weg gibt. Als ein Entwickler oder ein Benutzer, wenn Sie auf eine Schaltfläche Tippen Sie zweimal, Sie erwarten, dass der event-handler aufgerufen werden, zweimal.

Hoffe, das hilft
- In der Regel ist dies, was Sie erwarten. in diesem Fall ist der Benutzer nicht in der Lage sein sollen drücken Sie die-Taste erneut, während ein übergang zu einem neuen Bildschirm (Ansicht). das ist, wie es funktioniert mit android-Aktivitäten, iOS-Navigations-controller etc..
InformationsquelleAutor Titouan de Bailleul
2

einfach Maske, die den ganzen container, und dann entlarven Sie; erstellen Sie eine ref für die container oder einem panel, in dem der button existiert in Ihrem controller und Tippen Sie auf set:
```
ref.setMasked(true)
```
Nachdem die neue Ansicht abgelegt wird einfach entlarven, indem
```
ref.setMasked(false)
```
InformationsquelleAutor Ram G Athreya
0

Eine weitere Möglichkeit ist das spiegeln eines Parameters, wenn die Liste das Element angetippt einmal, wie diese:
```
{
   onListItemTap: function () {
      if (!this.tapped) {
         this.tapped = true;
         ...
      }
   }
}
```
Natürlich, das funktioniert nur, wenn Sie die Zerstörung der Listen-Ansicht, sobald der Benutzer geht zu einem anderen Bildschirm.

InformationsquelleAutor Tyson Cadenhead

Erstellte ich eine Methode für die überprüfung dieser:

    ENSURE_NO_DOUBLE_TAP : function(classNameToPush) {
        if (Ext.getClassName(Ext.getCmp('MyViewport').getActiveItem()) == classNameToPush) {
            return false;
        }

        return true;
    }

Dann aus Ihrer app, bevor Sie alles, was doppelt getippt wird verarbeitet:

        if (!ENSURE_NO_DOUBLE_TAP('MyApp.view.View')) {
            return;
        }

InformationsquelleAutor bwags

Wenn Sie hören, Tippen Sie auf ein Ereignis einer Taste mit Hörer,dann hier ist
meine Lösung:

listeners : {   
     release : function(){                                  
          if(this.getDisabled())return false;
          this.setDisabled(true);
          this.fireEvent('tap');
     },
     tap : function() {
         //do what you want
     }
 }

InformationsquelleAutor gabriel aflext

Ausweitung auf jayteejee und Merott die Antworten, ich habe einige code abfangen, die auf mehreren schnell schiebt zu verhindern nicht nur Duplikate, sondern zu verhindern, drücken der verschiedenen Ansichten sowie vor der Seite, der übergang abgeschlossen ist. Denken Sie an einen Benutzer Tippen auf die verschiedenen Elemente der Liste.

Beachten Sie auch die view.destroy(); Methode in den else-block zu verhindern view-Instanzen von gehäuften im Speicher.

Ext.define('Overrides.navigation.View', {
    extend: 'Ext.navigation.View',
    xtype: 'ovrnavigationview',

    interceptPush: false,

    push: function (view) {
        var activeItem = this.getActiveItem();

        //Prevent multiple pushes & duplicates
        if (!this.interceptPush && activeItem.xtype !== view.xtype) {

            //Set interceptPush
            this.interceptPush = true;

            //Reset interceptPush after 500 ms
            Ext.defer(function() {
                this.interceptPush = false;
            }, 500, this);

            //Handle push
            this.callParent(arguments);

        } else {

            //Warn developer
            console.warn("Prevented pushing view of xtype: " + view.xtype);

            //Destroy view
            view.destroy();

            return false;
        }
    }
});

InformationsquelleAutor M165437

0

Können Sie einfach die "itemsingletap" event.

Wenn Sie möchten, unterstützt double-taps wie gut, einen zweiten listener für "itemdoubletap" und rufen Sie die gleiche Funktion, die beide Hörer funktionieren zusammen.

InformationsquelleAutor DanBad

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.