Question

我使用sencha touch 2创建了List。

var aroundList = Ext.create('Ext.List', {
    itemCls : 'my-dataview-item',
    id : 'aroundMeList',
    itemTpl : '<div><img style="padding:1px; border-style:solid; border-width:1px; border-color:{trustColor}" src="' + localStorage.httpServerPrefix + '{imageURI}"/><span id="name">{fullname}</span><span id="time">{time}</span><p id="msg">{text}<span id="count">&nbsp;{replyCount}&nbsp;</span></p><p id="dist">&nbsp;< '+localStorage.radius+''+localStorage.unit+' '+'&nbsp;</p></div>',
    store : aroundStore,
    listeners : {
        select : {
            fn : this.onMessageClickedInAround,
            scope : this
        }
    }
});

我得到这样的输出（不完全是，但是，像这样）

enter image description here

当用户点击List中的第一行或第一项时，我正在调用onMessageClickedInAround方法（此方法用于显示来自该用户的消息），您可以看到上面的代码。

现在我要求当用户点击列表中的任何图片时，我需要显示相应的个人资料页面（即，一个用户可以通过单击列表中的图像查看其他个人资料），有什么方法可以做到这一点吗？

Answer 1

您应该为此

使用事件委派

更新

var aroundList = Ext.create('Ext.List', {
    // rest of your cfg
    listeners : {
        // other listeners
        tap: {
            fn: yourHandler,
            element: 'element',
            delegate: 'img'
        }
    }
});

如上所述，以下是过时的

var aroundList = Ext.create('Ext.List', {
    // rest of your cfg
    listeners : {
        // other listeners
        el: {
            tap: yourHandler,
            delegate: 'img'
        }
    }
});

Answer 2

如果您的列表是由数据源填充的，则sencha touch会将相应的记录传递给您的itemTap侦听器。你可以像下面这样做。

    listeners : {
        itemtap: function (list, index, item, record) {
            // Show next view based on current record
        }
    }

如果您只想在图像点按上执行此操作，则可以检查该侦听器中的事件。

    listeners : {
        itemtap: function (list, index, item, record, senchaEvent) {
            if (senchaEvent.event.target.nodeName === 'img') {
                // Show next view
            }
        }
    }

您可以将课程提供给<img>并检查。

在sencha Ext.List组件中单击事件

2 个答案: