列表视图项目上的Sencha弹出菜单点击

Question

使用sencha touch 2.2我在列表视图中显示产品列表。

在每个项目点按上，我想打开弹出框以显示每个产品详细信息，如下图所示。我认为它使用showBy函数在sencha中的默认值。 For Reference。

但它无法相应地对齐每个项目的箭头。

我的意思是说，如果我点击产品列表第一项目点击，那么箭头应该显示第一项，如果我点击产品列表最后一项，那么箭头应该相应地显示。

同时将弹出框设置在中心

Answer 1

Sencha Fiddle代码如下：https://fiddle.sencha.com/#fiddle/1t1

Ext.application({
    name: 'listview',

    launch: function() {
        var popup = Ext.create('Ext.Panel', {
            html: 'popup',
            hideOnMaskTap: true,
            modal: true
        });

        Ext.Viewport.add({
            xtype: 'list',
            fullscreen: true,
            itemTpl: '{name}',
            data: [{
                name: 'item 1'
            }, {
                name: 'item 2'
            }, {
                name: 'item 3'
            }],
            listeners: {
                itemtap: function(list, itemIndex, target) {
                    popup.showBy(target, 'tc-bc');
                }
            }
        })
    }
});

您可能忽略的是itemtap事件回调签名。第一个参数是列表，而不是listitem。

showBy方法的第二个参数描述了对齐。 tc-bc表示弹出窗口的顶部中心应与showBy目标的底部中心对齐。

请参阅http://docs.sencha.com/touch/2.2.1/#!/api/Ext.Component-method-showBy