使用叠加时，如何显示'sencha'选择字段？

Question

我目前有一个设置，你按下一个按钮，就会显示一个覆盖。覆盖图如下：

this.popup = new Ext.Panel({
    floating: true, modal: true, centered: true, width: 600, height: 400,
    items: [
        {
            xtype: 'toolbar',
            title: 'Custom Search',
            docked: 'top'
        },
        new Ext.field.Select({
            label: 'abc', name: 'asz', options: [...]
        })
    ]
});

现在，正如你所看到的，在我的覆盖上有一个选择字段，问题是，当你点击打开选择菜单时，选择菜单会出现在覆盖后面。我试过各种花招，但都无济于事。我试过调整zIndex的值，但它们似乎要么没有改变，要么改回sencha的默认值，因为这似乎没有什么区别。

我从来没有想过，在sencha，我可以花这么多小时试图把一个selectfield放在一个覆盖上。这个问题似乎出现在chrome&safari（ipad）

覆盖&selectfield代码基本上就是从这里取的http://dev.sencha.com/deploy/touch/examples/kitchensink/

Answer 1

我不确定你指的是1.x还是2.x。你使用Ext.field.Select，这是一个2.x类，但你指向了1.x的例子。。

如果您谈论的是Sencha Touch 2，那么您的代码应该可以正常工作。然而，我知道其中一个PR有一个错误，它不起作用。

我已经用Beta 3测试过了，它按照建议工作：

this.popup = Ext.create('Ext.Panel', {
    floating: true,
    modal: true,
    centered: true,
    width: 600,
    height: 400,
    items: [
        {
            xtype: 'toolbar',
            title: 'Custom Search',
            docked: 'top'
        },
        Ext.create('Ext.field.Select', {
            label: 'abc',
            name: 'asz',
            options: [{
                text: 'asd', value: '1'
            }]
        })
    ]
});
Ext.Viewport.add(this.popup);
this.popup.show();

如果您谈论的是Sencha Touch 1，则必须修改选择器的z索引。使用Chrome计算className是什么（可能是.x-picker），并将z索引设置为类似999的值。

Answer 2

您的问题没有包含足够的信息。但我觉得你错过了什么。

when you set z-index property, you should make sure the overlay is positioned( absolute, relative, fixed).

您可以添加位置属性，然后再次测试它。也许它对你有用。