Sencha 在列表 itemtap 上弹出答案

【问题标题】：Sencha pop over on list itemtapSencha 在列表 itemtap 上弹出
【发布时间】：2011-10-20 13:00:16
【问题描述】：

在我的应用程序中，我有一个列表。我想在点击一个项目时显示一个弹出（覆盖）。它适用于某些项目，但对于某些项目，叠加层会直接进入列表项。

注意：我想显示一个带有指向当前选定项目的箭头的叠加层。这是我的代码：

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();           
    }
}});

问题可能是我没有正确获取列表项。我只是在这里使用了当前元素。我也试过 list.getNode(index) 但它做同样的事情。谁能指导我正确的方向？

塔伦。

【问题讨论】：

标签： list sencha-touch extjs

【解决方案1】：

只需将false 按函数添加到节目中，即overlay.showBy(element, 'fade',false);

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

【讨论】：

哦！我是多么愚蠢……谢谢莉亚。
该解决方案运行良好，但是当我将面板扩展为在 vbox 布局中有按钮时，显示的面板高度随机减小。即对于某些项目，它显示完美的箭头面板和三个垂直堆叠的按钮，但对于某些项目，特别是列表底部的项目，面板高度降低了？我无法识别这种随机行为。

【解决方案2】：

这是我的面板代码。

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'}
]});

【讨论】：