Sencha Touch itemtap

Posted 2023-02-26

【中文标题】Sencha Touch itemtap

【英文标题】：

【发布时间】：2011-06-11 20:32:35

【问题描述】：

我有一份 sencha touch 在列表中显示的联系人列表。然后，当您单击列表中的姓名时，它应该向右滑动并说 Hello contact name！但是当它现在滑过时，它只是说你好！在第 29 行是 item tap 的动作发生的地方，我相信问题就在这里。我只是不知道如何正确格式化它。下面是我的源代码。

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

);

【参考方案1】：

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

来自文档：

itemtap : ( Ext.DataView this, Number index, Ext.Element item, 分机事件对象 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

【讨论】：

我只是在学习 sencha touch 什么是 dataview 对象、被点击的项目的索引、项目元素和事件对象。此外，dataView 的第一个参数和“索引”的第二个参数如何。感谢您的帮助。

List 继承自 DataView，而 'itemtap' 事件是继承自 DataView 基类的事件。因此，在使用列表时，文档有点混乱。事件处理程序的第一个参数包含对您的 List 实例的引用（相当于您示例中的变量“ListDemo.listPanel”）。 'index' 参数指的是列表中被点击的项目所在的位置，例如点击的第一个列表项给出 index = 0，点击的第二个项目给出 index = 1 等。对于简单的用例，您可以忽略 item 和 e 参数 - 加上我的空间不足.. :)

【参考方案2】：

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

这就是我让它工作的方式。

【讨论】：

请注意，在 Sencha Touch 2 中，更新方法现在是 setData()