Bryntum Touch Schedule / Sencha Touch framework Page Scrolling / Panning disabled

Question

We have created a responsive Single Page html app using Angular and found the Ext Schedule & Touch Schedule components from Bryntum which were exactly what we need.

The Touch Schedule from Brytnum builds upon the Secha Touch Framework.

I am loading the Touch Schedule into a Ext.Panel which loads into a div in my page. This is a change from the examples which all load the Touch Schedule at the body level.

After loading the page containing Touch Schedule, we found on mobile devices: iPad, iPhone, Nexus 7 that the whole body is locked so it can't move. This is necessary for the component to work but when we pop up our modal to allow you to enter reservation information it couldn't scroll and was longer than the iPad. Also when we moved to other pages in our application after the Touch Schedule page the lists that go off the screen needed to be scrollable and are locked.

Brytunum pointed us to sencha since it is not in their code that this problem occurs, and sencha seems to believe all users would use their framework for the entire application not just for a component, living on a page.

We need the component to be in a locked screen and work as it does but to be able to turn off the window locking when our modal loads or when we navigate away from the touch schedule page.

We are currently using these versions of these components:

Bryntum Touch Scheduler 1.0.7

Sencha Touch 2.3

Answer 1

I ended up hunting down this issue. I found that the touchmove handler for the window was being overridden with a handler that preventDefault of the windows normal handler.

In sencha-touch-all.js function applyPreventPanning within the Ext.define('Ext.viewport.Default') definition.

I failed to find a way to call the add Listener / remove Listener from either the Ext global object or the Ext container that holds the schedule grid.

I decided to add this code in the contructor of Ext.viewport.Default before the return this statement.

Ext.doPreventPanning = this.doPreventPanning;
Ext.addWindowListener = this.addWindowListener;
Ext.removeWindowListener = this.removeWindowListener;

Now in my angular controller I created these two functions

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

I added this "deconstructor" function to my controller, to take care of navigating away from this view

$scope.$on("$destroy", function () {
    $scope.allowPanning();
});

And in the modal show I added : $scope.allowPanning(); And in the modal.result.then I added : $scope.removePanning();