javascript - Selectfield 卡在 Sencha Touch 中并且事件在选择时未触发

Question

我有一个在桌面上完美运行的selectfield(滚动、选择、触发正确的事件、更新相应的字段等。)，但在之后不会消失在移动设备 (iPhone) 上运行时的选择。

做出选择后，选择字段“轮子”不会消失，甚至在蒙版中点击(滚动选择器区域之外)时也不会消失。同样，这只发生在移动设备上，在桌面设备上完全没问题。

听起来像是一个框架错误？继续阅读以获取更多线索...

{
    xtype: 'selectfield',
    id: 'editor-page',
    name: 'page',
    label: 'Page',
    labelWidth: 70,
    options: [
        {text: 'N/A',  value: 'N/A'},
        {text: '1',  value: '1'},
        {text: '2',  value: '2'},
        {text: '3',  value: '3'}
        // ...
    ]
}

<小时/>

我尝试过的事情(没有运气)

• 根据我在网络上看到的类似问题，我尝试过设置 showAnimation: 'false'。

• 强制hideOnMaskTap: 'true'(即使默认情况下应该如此)

• 设置模式:'true'

• 设置 stopMaskTapEvent: 'false'(允许在选取器外部进行点击)

  (并且......上述的每一种组合，以防框架怪异或我对它们的相互依赖性产生误解。)

<小时/>

Selectfield 事件在桌面上触发，但不在移动设备 (iPhone) 上触发？

在selectfield上，我将监听器放在以下事件上，作为捕获选择更改并强制隐藏或模糊的手段，但事实证明，它们仅在桌面版 (Chrome) 上触发，而不是在移动版 Safari 中触发。

listeners: {
    'render': function (thisComponent) {
        alert("select!");                           
        thisComponent.blur();
    },
    'action': function (thisComponent) {
        alert("action!");
        thisComponent.blur();
    },
    'select': function (thisComponent) {
        alert("select!");
        thisComponent.blur();
    }
}            

<小时/>

最后，我不愿意承认这一点，但是，是的，我正在使用 Sencha Touch 1.1.0

*喘气!哦，太恐怖了!*

此时，项目可能没有足够的时间来考虑迁移到 2.x 的所有后果。因此，如果我绝对必须解决这个问题，那么这是我在进行迁移之前的最后努力。

Answer 1

埃加德。所以事实证明，虽然没有在桌面浏览器中呈现，但selectfield<的移动呈现 显示一组“完成”和“取消”按钮。

由于桌面版本在选择时工作而不显示这些确认按钮，所以我忘记了 selectfield 的移动渲染显示确认按钮，而不是能够在选择器外部点击/单击或清除 mask 做出选择后。

在我的特定情况下，我有一些 CSS 工具栏规则遮盖了 selectfield 选择器中的按钮。

因此，只需找到正确的 CSS 选择器来显示在移动设备上隐藏的按钮(尽管在桌面上不必要或不可见)。

/* Override toolbar padding for selectfield confirmation toolbar */
.x-picker .x-toolbar .x-layout-box-inner {
    margin-top: -35px;
}