Ausgabe
Wir haben mit Angular eine reaktionsschnelle Single-Page-HTML-App erstellt und die Ext Schedule & Touch Schedule-Komponenten von Bryntum gefunden, die genau das waren, was wir brauchten.
Der Touch Schedule von Brytnum baut auf dem Secha Touch Framework auf.
Ich lade den Touch-Zeitplan in ein Ext.Panel, das in ein div auf meiner Seite geladen wird. Dies ist eine Änderung gegenüber den Beispielen, die alle den Berührungsplan auf Körperebene laden.
Nach dem Laden der Seite mit dem Touch-Zeitplan haben wir auf Mobilgeräten festgestellt: iPad, iPhone, Nexus 7, dass der gesamte Körper gesperrt ist, sodass er sich nicht bewegen kann. Dies ist notwendig, damit die Komponente funktioniert, aber als wir unser Modal öffneten, damit Sie Reservierungsinformationen eingeben konnten, konnte es nicht scrollen und war länger als das iPad. Auch als wir nach der Touch-Schedule-Seite zu anderen Seiten in unserer Anwendung wechselten, mussten die Listen, die den Bildschirm verlassen, scrollbar und gesperrt sein.
Brytunum hat uns auf Sencha verwiesen, da dieses Problem nicht in ihrem Code auftritt, und Sencha scheint zu glauben, dass alle Benutzer ihr Framework für die gesamte Anwendung verwenden würden, nicht nur für eine Komponente, die auf einer Seite lebt.
Die Komponente muss sich in einem gesperrten Bildschirm befinden und so funktionieren, wie sie es tut, aber in der Lage sein, die Fenstersperre auszuschalten, wenn unser Modal geladen wird oder wenn wir von der Touch-Zeitplanseite weg navigieren.
Wir verwenden derzeit diese Versionen dieser Komponenten:
Bryntum Touch Scheduler 1.0.7
Sencha-Touch 2.3
Lösung
Am Ende bin ich diesem Problem auf die Spur gekommen. Ich habe festgestellt, dass der Touchmove-Handler für das Fenster mit einem Handler überschrieben wurde, der den Standard-Handler von Windows verhindert.
In der sencha-touch-all.js-Funktion applyPreventPanning innerhalb der Ext.define(‘Ext.viewport.Default’)-Definition.
Ich habe keine Möglichkeit gefunden, den Add Listener / Remove Listener entweder aus dem globalen Ext-Objekt oder aus dem Ext-Container aufzurufen, der das Zeitplanraster enthält.
Ich habe mich entschieden, diesen Code im Konstruktor von Ext.viewport.Default hinzuzufügen, bevor diese Anweisung zurückgegeben wird.
Ext.doPreventPanning = this.doPreventPanning;
Ext.addWindowListener = this.addWindowListener;
Ext.removeWindowListener = this.removeWindowListener;
Jetzt habe ich in meinem Winkelcontroller diese beiden Funktionen erstellt
$scope.allowPanning = function () {
if (Ext != undefined && Ext.removeWindowListener != undefined && Ext.doPreventPanning != undefined) {
Ext.removeWindowListener('touchmove', Ext.doPreventPanning, false);
}
};
$scope.removePanning = function () {
if (Ext != undefined && Ext.addWindowListener != undefined && Ext.doPreventPanning != undefined) {
Ext.addWindowListener('touchmove', Ext.doPreventPanning, false);
}
};
Ich habe diese “Dekonstruktor”-Funktion zu meinem Controller hinzugefügt, um mich um die Navigation von dieser Ansicht zu kümmern
$scope.$on("$destroy", function () {
$scope.allowPanning();
});
Und in der modalen Show habe ich hinzugefügt: $scope.allowPanning(); Und im modal.result.then fügte ich hinzu: $scope.removePanning();
Beantwortet von – Jim
Antwort geprüft von – Senaida (FixError Volunteer)
