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: [...]
        })
    ]
});

现在您可以看到我的叠加层上有一个选择域，问题是，当您单击以调出选择菜单时，选择菜单会出现在叠加层后面。我尝试了各种各样的hacky技巧无济于事。我已经尝试调整zIndex值，但是它们似乎没有改变，或者改回到sencha的默认值，因为它似乎没有什么区别。

我永远不会想到，在sencha中，我可以花费这么多时间尝试将选择字段放到叠加层上。这个问题似乎都发生在chrome＆amp; 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-index。使用Chrome来确定className的内容（可能是.x-picker），并将z-index设置为类似999的内容。

Answer 2

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

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

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

当我使用叠加层时，如何将“sencha”选择域带入视图？

2 个答案: