Scroll 使用Sencha Touch中的Ext.Picker滚动错误

我再一次需要这个很棒的社区的帮助

在控制器中创建Ext.Picker时出现问题

以下是我的选择器的简单版本：

var picker = Ext.create('Ext.Picker', {
    slots: [
        {
            name : 'limit_speed',
            title: 'Speed',
            data : [
                {text: '50 KB/s', value: 50},
                {text: '100 KB/s', value: 100},
                {text: '200 KB/s', value: 200},
                {text: '300 KB/s', value: 300}
            ]
        }
    ]
});
Ext.Viewport.add(picker);
picker.show();

当选择器面板弹出时，我可以滚动整个屏幕

我试图尽可能地设置

scrollable:false

属性，但仍然可以滚动边界

还有一些奇怪的事实：我向下滚动的距离各不相同，我不知道这取决于什么。有时我可以滚动直到整个屏幕变黑，但有时我根本无法滚动。此外，此错误不会出现在每个设备上。例如，我的HTC One S和安卓4.1.1有这些问题，但HTC One X和安卓4.1.1不受此缺陷的影响

如果有人愿意查看整个代码：

查看将所有内容放在一起的TimerPanel：

查看时间重播：

告诉何时启动选择器的控制器：

有人能告诉我这是一个已知的bug还是我做错了什么。

快速查看。。。 主要问题-过度嵌套。 视图是一个容器（或继承所有容器属性的面板）-布局适合。 其中有1个项目-一个带有布局vbox的容器（有6个项目-继续嵌套和嵌套…）

第一个容器（视图）是否用于填充另一个视图/面板中的区域？ie：你为什么要使用layout:fit

假设：这个面板似乎是一个独立的页面，您希望它是全屏的，没有滚动/溢出

卸下其中一个顶部容器，以进行以下操作：

Ext.define('MyApp.view.TimerPanel', {
    extend: 'Ext.Container',
    alias: 'widget.timer',

    config: {
        layout: {
            type: 'vbox',
        },
        scrollable: false, // shouldn't be needed.
        fullscreen: true,
        items: [{
            xtype: 'container',
            docked: 'top',
            height: 50,
            layout: {
                type: 'hbox'
            },
            ...

您的容器将从“全屏”填充屏幕，子元素上的vbox | flex值将提供您想要的比率

您所经历的是“滚动导致表单/字段元素拖拽错误”，这是由于视图嵌套过度以及设置配置过度造成的。Sencha对大多数未设置的选项都有默认值和回退。有些东西在设定时，会与其他东西产生冲突。将in-touch事件添加到字段上的所有侦听器中，代码就会抛出虚拟对象并开始导致错误

当您的页面开始出现滚动/拖动错误时，首先删除全屏和可滚动的所有设置（即：未设置为true/false/other-删除它们！），然后检查布局-确保使用最简单的方法显示所需内容。然后在绝对必要时开始添加全屏/可滚动

至于scrollable，似乎一些进一步的描述可能会有所帮助：D 滚动的复杂设置示例：

scrollable: {
    direction: 'vertical',
    directionLock: true,
    translatable: {
        translationMethod: 'auto'
    },
    momentumEasing: {
        momentum: {
            acceleration: 30,
            friction: 0.5
        },
        bounce: {
            acceleration: 20,
            springTension: 0.5,

        },
        minVelocity: 5
    },
    outOfBoundRestrictFactor: 0
},

    scrollable: false,

禁止滚动的示例：

scrollable: {
    direction: 'vertical',
    directionLock: true,
    translatable: {
        translationMethod: 'auto'
    },
    momentumEasing: {
        momentum: {
            acceleration: 30,
            friction: 0.5
        },
        bounce: {
            acceleration: 20,
            springTension: 0.5,

        },
        minVelocity: 5
    },
    outOfBoundRestrictFactor: 0
},

    scrollable: false,

可滚动的-y真、可滚动的-x假的简单方法：

    scrollable: 'vertical',

Scrollable接受字符串和对象配置

希望这一切都有帮助。 干杯 G

---

另外，如果它仍在播放，我会设法抽出时间重温一遍，以便能够为您提供工作代码。

感谢您的广泛帮助Greg！至少有一点提示；-）我又花了几个小时试图找出问题的原因。但我还是没能解决这个问题。我试图删除每个不必要的值并清理嵌套。但是外观还是一样。因此，如果您能进一步帮助我，我将不胜感激。你需要什么？抱歉@Markus-我用承诺的代码写了一个很长的回复，但在提交之前就失去了互联网连接（一周！）。当网络进入我的名字并开始工作时，我埋头于工作——37/40天12小时/天。这个项目昨天发布了，所以现在我可以回到这个世界上一段时间了。我还为您提供了一些隐藏的Sencha秘密，这也将有助于您的编码。我会在下班回家后发布所有信息，并启动家庭系统。