Sencha Touch itemtap

Question

我有一个联系人列表，sencha touch正在列表中显示。然后，当您单击列表中的姓名时，它应该向右滑动并显示“Hello {contact name}！”但是现在它只说“Hello！”。我相信问题出在第29行进行项目点击的操作上。我只是不知道如何正确地格式化它。下面是我的源代码。

ListDemo = new Ext.Application({
name: "ListDemo",

launch: function() {

    ListDemo.detailPanel = new Ext.Panel({
        id: 'detailpanel',
        tpl: 'Hello, {firstName}!',
        dockedItems: [
            {
                xtype: 'toolbar',
                items: [{
                    text: 'back',
                    ui: 'back',
                    handler: function() {
                        ListDemo.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
                    }
                }]
            }
        ]
    });

    ListDemo.listPanel = new Ext.List({
        id: 'disclosurelist',
        store: ListDemo.ListStore,
        itemTpl: '<div class="contact">{firstName} {lastName}</div>',

        listeners:{
            itemtap: function(record, index){               
            ListDemo.detailPanel.update(record.data);
            ListDemo.Viewport.setActiveItem('detailpanel');
            }
        }
    });

    ListDemo.Viewport = new Ext.Panel ({
        fullscreen: true,
        layout: 'card',
        cardSwitchAnimation: 'slide',
        items: [ListDemo.listPanel, ListDemo.detailPanel]
    });

}

});

- Alex

Answer 1

itemtap事件的第一个参数并不是被点击的List项的记录，而是DataView本身。

根据文档：

itemtap: (Ext.DataView this, Number index, Ext.Element item, Ext.EventObject e)在节点被点击时触发

Listeners will be called with the following arguments:
this : Ext.DataView
    The DataView object
index : Number
    The index of the item that was tapped
item : Ext.Element
    The item element
e : Ext.EventObject
    The event object

您可以使用以下代码获取已选中的记录：

dataView.store.getAt(index); // where 'dataView' is 1st argument and 'index' the 2nd

- Stuart

---

我正在学习Sencha Touch，想请问dataview对象、被点击的项目索引、项目元素和事件对象分别是什么。另外，为什么dataView是第一个参数而'index'是第二个参数。感谢您的帮助。 - Alex

一个列表从DataView继承而来,'itemtap'事件也是从DataView基类继承而来。因此，当使用列表时，文档可能会有点混淆。事件处理程序的第一个参数包含对列表实例的引用(与您的示例中的变量'ListDemo.listPanel'相当)。'index'参数指的是列表中被点击项的位置，例如，点击第一项列表后索引= 0, 点击第二个项后索引= 1等。对于简单的用例，您可以忽略item和e参数-此外，我已经没有更多的空间了.. :) - Stuart

Answer 2

itemtap: function(view, index, item, e) {
    var rec = view.getStore().getAt(index);
    ListDemo.detailPanel.update(rec.data);
}

这是我让它工作的方法。

- Alex

---

请注意，在Sencha Touch 2中，update方法现已更名为setData()。 - cyberwombat