Sencha Touch 2.0 多列表项按钮答案

【问题标题】：Sencha Touch 2.0 Multiple List Item ButtonsSencha Touch 2.0 多列表项按钮
【发布时间】：2013-01-23 19:54:30
【问题描述】：

有谁知道在 Sencha Touch 列表项上是否可以有多个图标按钮来监听不同的事件？如果是这样，我怎样才能做到这一点？

例如，假设我有一个人员列表，并且有一个电子邮件、电话图标和每个人的位置地图。我想显示 3 个小图标并能够映射每个图标以执行 3 个单独的操作。

【问题讨论】：

标签： sencha-touch sencha-touch-2

【解决方案1】：

这取决于您创建按钮的方式。

如果按钮是使用itemTpl 的简单HTML，您可以只监听List 上的itemtap 事件并使用event 参数来检测您按下了哪个按钮。您可以通过自定义属性甚至 className 来做到这一点：

myListItemTapListener: function(list, index, target, e) {
    var el = Ext.get(e.getTarget());
    if (el.hasClass('map')) {
        this.navigate(index);
    } else if(el.hasClass('email')) {
        this.email(index);
    } else if(el.hasClass('phone')) {
        this.phone(index);
    }
}

如果您的按钮是组件列表中的实际Ext.Button，您可以在创建组件时简单地在每个按钮上添加一个侦听器。 Sencha Docs 中的DataView Guide 中有一个如何执行此操作的示例。

【讨论】：

【解决方案2】：

Component DataView 可以帮助你。你可以看这个[指南]：http://docs.sencha.com/touch/2-0/#!/guide/dataview-section-4

我写了一个[demo]：https://github.com/hs3180/Sencha-Touch-Component-DataView , 在 app/view/,

Main.js，一个 useComponets 为 true 的 dataview 组件，并将 defaultType 设置为 'demo.view .Item'。
Item.js，一个DataItem，每个item的可见内容是一个面板（在Card.js中）。我使用数据映射将记录中的 name（在 store 中）链接到 userName（在 demo.view.Card 中）。
Card.js，每个人的面板。一个用户名标题和 3 个按钮。

【讨论】：