Sencha 会在列表项tap 上弹出

发布于 2024-12-11 04:08:22 字数 854 浏览 0 评论 0原文

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

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

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) 但它做了同样的事情。有人能指导我正确的方向吗?

塔伦。

In my application i have a list. I want to show a pop over (overlay) when an item is tapped. It works for some items but for some items the overlay goes right to the list item.

Note: I want to show an overlay with arrow pointing to current selected item.
Here is my 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();           
    }
}});

Problem may be i am not getting the list item correctly. I just used the current element here. I also tried list.getNode(index) but it does the same thing. Can anyone guide me in right direction?

Tarun.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

给妤﹃绝世温柔 2024-12-18 04:08:22

只需将 false 添加到按功能显示,即 overlay.showBy(element, 'fade',false);

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

just add false to the show by function i.e. overlay.showBy(element, 'fade',false);

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

旧人九事 2024-12-18 04:08:22

这是我的面板代码。

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

Here is my panel code.

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'}
]});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文