Sencha Popup Menu On Listview Item Tap

Question

Using sencha touch 2.2 i am showing list of products in list view.

On each Item tap I want to open popup box to show each product detail like attached image below. I think its default in sencha by using showBy function. For Reference.

But it could not align the arrow on each item tap accordingly.

I mean to say if I tap on Product List First Item Tap then arrow should be show with first item and if i tap on Product List last item then arrow should be show with it accordingly.

Also set the popup box in center

Answer 1

Sencha Fiddle for the code below: 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');
                }
            }
        })
    }
});

What you might have overlooked is the itemtap event callback signature. The first parameter is the list, not the listitem.

The second argument of the showBy method describes the alignment. tc-bc means top center of the popup should align with the bottom center of the showBy target.

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