我正密切关注GeoCongress.us App中的代码,因为这是我的第一个Sencha Touch应用程序,该应用程序的布局功能背后的前提与我希望实现的类似。
我在获取List对象以响应itemtap
事件时遇到问题。我的目的是在itemtap
级别捕获SetsScreen
事件,触发我的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}
]
});
答案 0 :(得分:1)
哦,伙计 - 我不知道我是如何偶然发现这个答案的,一个非常模糊的拼写错误是阻止它工作的唯一因素。
Ext.List()
使用它的itemSelector
属性来确定哪个元素符合“点击”条件。我的itemSelector
设置为.sets-list-item
,但模板为<div class="set-list-item">
。更正模板并itemtap
按预期启动。
答案 1 :(得分:0)
您可能需要查看updated screencast - 因为1.0版本中的某些API发生了变化,而旧的截屏现在已经不同步了。