2010-11-30 82 views
2

我非常关注GeoCongress.us App中的代码,因为这是我的第一个Sencha Touch应用程序,并且该应用程序的布局功能背后的前提与我希望实现的类似。Sencha Touch:列表ItemTap事件触发

虽然我有一个问题让List对象回应itemtap事件。我的意图是在SetsScreen级别捕获itemtap事件,激发我自己的自定义事件,我的App对象将侦听,然后App可以处理显示新卡的过程(基于点击的项目)。

首先,SetsScreen对象(至少它的相关部分):

DataSets.views.SetsScreen = Ext.extend(Ext.Panel, { 
    cls: 'sets-screen', 
    layout: 'card', 

    initComponent: function() { 
     // Build the main content list and add it to the main scren 
     this.setsList = new DataSets.views.SetsList({ 
      scroll: false 
     }); 
     this.setsList.on('itemtap', this.onListItemTap, this); 

     this.main = new Ext.Container({ 
      scroll: true, 
      items: [this.setsList] 
     }); 

     this.items = [this.main]; 
     DataSets.views.SetsScreen.superclass.initComponent.call(this); 
    }, 

    onListItemTap: function(dv, index, item, e) { 
     alert('Test'); 
    } 
}); 

这里是我的SetsList对象(没有什么了不起这里):

DataSets.views.SetsList = Ext.extend(Ext.List, { 
    itemSelector: '.sets-list-item', 
    singleSelect: true, 

    initComponent: function() { 
     this.store = DataSets.stores.Sets; 
     this.itemTpl = Ext.XTemplate.from('sets-list'); 

     DataSets.views.SetsList.superclass.initComponent.call(this); 
    } 
}); 

而且Sets对象是什么不仅仅是一个快速数据模型和Ext.data.Store:

Ext.regModel('Sets', { 
    idProperty: 'id', 
    fields: [ 
     'title', 
     'last_updated', 
     'current_value' 
    ] 
}); 

DataSets.stores.Sets = new Ext.data.Store({ 
    model: 'Sets', 
    data: [ 
     {id: 0, title: 'Weight', last_updated: new Date('11/28/2010 00:00:00 AM GMT-0600'), current_value: 145}, 
     {id: 1, title: 'Cups of Coffee', last_updated: new Date('11/28/2010 07:00:00 AM GMT-0600'), current_value: 1} 
    ] 
}); 

回答

1

哦,男人 - 我不知道我是怎么偶然发现这个答案的,一个非常隐晦的错字是阻止它工作的唯一的东西。

Ext.List()使用它的itemSelector属性来确定哪些元素符合“点击”的条件。我的itemSelector设置为.sets-list-item,但模板有<div class="set-list-item">。按照预期修正模板和itemtap

0

您可能需要查看updated screencast - 因为1.0版本中的一些API已更改,而旧版本的屏幕截图现在不同步。

+0

从来没有看过屏幕录像 - 感谢您的链接!这是参考GeoTweets(而不是GeoCongress,我正在使用它来学习),但无论如何我要去看它以寻找线索。尽管如此,我正在引用有效的1.0 API文档,没有什么是突出的。 – 2010-11-30 01:37:24