Bryntum Touch Schedule / Sencha Touch 框架 Page Scrolling / Panning disabled答案

【问题标题】：Bryntum Touch Schedule / Sencha Touch framework Page Scrolling / Panning disabledBryntum Touch Schedule / Sencha Touch 框架 Page Scrolling / Panning disabled
【发布时间】：2014-06-04 00:14:21
【问题描述】：

我们使用 Angular 创建了一个响应式单页 html 应用程序，并找到了 Bryntum 的 Ext Schedule 和 Touch Schedule 组件，这正是我们所需要的。

Brytnum 的 Touch Schedule 建立在 Secha Touch 框架之上。

我正在将 Touch Schedule 加载到 Ext.Panel 中，该 Ext.Panel 加载到我页面中的 div 中。这是与所有在身体级别加载触摸计划的示例的变化。

加载包含Touch Schedule的页面后，我们在移动设备上发现：iPad、iPhone、Nexus 7，整个机身被锁定，无法移动。这是组件工作所必需的，但是当我们弹出我们的模式以允许您输入预订信息时，它无法滚动并且比 iPad 长。此外，当我们在 Touch Schedule 页面之后移动到应用程序中的其他页面时，离开屏幕的列表需要可滚动并被锁定。

Brytunum 向我们指出了 sencha，因为在他们的代码中没有出现这个问题，而且 sencha 似乎相信所有用户都会将他们的框架用于整个应用程序，而不仅仅是用于页面上的组件。

我们需要组件处于锁定屏幕并照常工作，但能够在我们的模态加载或离开触摸计划页面时关闭窗口锁定。

我们目前正在使用这些组件的这些版本：

Bryntum 触摸调度程序 1.0.7

煎茶触控 2.3

【问题讨论】：

标签： ios angularjs sencha-touch-2

【解决方案1】：

我最终找到了这个问题。我发现窗口的 touchmove 处理程序被一个处理程序覆盖，该处理程序阻止了 windows 正常处理程序的默认值。

在 Ext.define('Ext.viewport.Default') 定义中的 sencha-touch-all.js 函数 applyPreventPanning。

我找不到从 Ext 全局对象或保存调度网格的 Ext 容器调用添加侦听器/删除侦听器的方法。

我决定在Ext.viewport.Default的构造函数中，在return this语句之前添加这段代码。

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

现在我在我的角度控制器中创建了这两个函数

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

我将这个“解构器”函数添加到我的控制器中，以照顾离开这个视图

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

在模态显示中我添加了： $scope.allowPanning(); 在 modal.result.then 我添加了： $scope.removePanning();

【讨论】：