Sencha pop sur la liste itemtap

Question

Dans mon application j'ai une liste. Je veux montrer un pop over (overlay) quand un objet est tapé. Cela fonctionne pour certains éléments, mais pour certains éléments, la superposition va directement à l'élément de la liste.

Remarque: Je souhaite afficher une superposition avec une flèche pointant vers l'élément actuellement sélectionné. Voici mon code:

var overlay = new Ext.Panel({ 
     floating: true, 
     modal: true, 
     width: 100, 
     height: 100, 
     scroll: false}); 

var list = Ext.extend(Ext.List, { 

    store: myStore, 
    itemTpl: "{firstName} {lastName}", 

    listeners: { 
     itemtap: function (list, index, element, event) { 
     // Grab a reference the record. 
     var record = list.getRecord(element); 

     // First, we update the the overlay with the proper record (data binding). 
     overlay.update(record.data); 
     overlay.showBy(element, 'fade'); 
     list.doComponentLayout();   
    } 
}}); 

problème peut être que je ne reçois pas correctement l'élément de liste. Je viens d'utiliser l'élément actuel ici. J'ai aussi essayé list.getNode (index) mais ça fait la même chose. Quelqu'un peut-il me guider dans la bonne direction?

Tarun.

Answer 1

ajouter juste false à l'émission par la fonction à savoir overlay.showBy(element, 'fade',false);

http://docs.sencha.com/touch/1-1/#!/api/Ext.Panel-method-showBy

Answer 2

Voici mon code de panneau.

var overlay = new Ext.Panel({ 
// We'll set the image src attribute's value programmatically. 
//dock:'left', 
floating: true, 
modal: true, 
width: 138, 
height: 140, 
scroll: false, 
layout: { 
    type: 'vbox', 
    align:'center', 
    pack:'center' 
}, 
//defaults:{flex:1}, 
items:[ 
    {xtype: 'spacer'}, 
    { 
      xtype: 'button', 
      ui:'action', 
      height:30, 
      width:103, 
      id: 'profileButton', 
      text: 'Profile' 
    }, 
    {xtype: 'spacer'}, 
    { 
     xtype: 'button', 
     ui:'action', 
     height:30, 
     width:103, 
     id: 'positionsButton', 
     text: 'Positions' 
    }, 
    {xtype: 'spacer'}, 
    { 
     xtype: 'button', 
     ui:'action', 
     height:30, 
     width:103, 
     id: 'actionButton', 
     text: 'Action' 
    }, 
    {xtype: 'spacer'} 
]});