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

Question

我用感应器2创建了列表。

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

我得到了这样的输出(不完全是这样的，而是这样的)。

​

​

当用户单击列表中的第一行或第一项时，我调用onMessageClickedInAround方法(此方法用于显示来自该用户的消息)，您可以看到上面的代码。

现在我有一个要求，当用户单击列表中的任何图片时，我需要显示相应的配置文件页面(即一个用户可以通过单击列表中的图像来查看其他配置文件)，有什么方法可以这样做吗？

Answer 1

如果您的列表是由数据源填充的，则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>一个类，并检查它。

Answer 2

您应该为此使用事件委托。

更新

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