0

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

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

这是我的 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();

当 Picker 面板弹出时，我可以滚动整个屏幕。

面板出现在底部 我滚动了边界

我试图尽可能地设置scrollable: false属性，但我仍然可以滚动边框。

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

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

查看 TimerPanel 将所有内容放在一起：http ://pastebin.com/2FiPgZqW

查看计时器编辑：http: //pastebin.com/yv08tsYk

控制器告诉何时启动 Picker： http: //pastebin.com/LkQWhaAF

谁能告诉我这是一个已知的错误还是我做错了什么。

4

1 回答 1

1

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

第一个容器（视图），这是为了填充另一个视图/面板中的区域吗？即：你为什么使用布局：适合？

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

删除顶部容器之一以获得此：

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 对于大多数未设置的选项都有默认值和回退。有些东西在设置时会与其他东西产生冲突。将触摸事件添加到字段上的所有侦听器中，代码只会吐出虚拟对象并开始导致错误。

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

至于可滚动，似乎一些进一步的描述可能会有所帮助：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-y true, scrollable-x false的简单方法：

    scrollable: 'vertical',

Scrollable 接受字符串和对象配置。

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

PS如果它仍然播放，我会试着找时间给它一次，以便能够给你工作代码。

于 2013-08-14T09:56:21.577 回答