PDA

View Full Version : "itemtap" event never fired when pushing an Ext.List into an existing navigation view



ThiemNguyen
20 Nov 2013, 9:08 AM
Hello,

My scheme is quite simple. This is a child view which can be pushed into a Ext.navigation.View class. If I let it extend from Ext.List, itemtap event is never fired.

Here is my code for this child view, it's very simple:


Ext.define('tscc.view.Sessions', {
extend: 'Ext.List',
alias: 'widget.Sessions',


requires: [
],


config: {
id: 'sessions-view',
store: 'Sessions',
itemTpl: '{title}',


listeners: [
{
fn: 'onItemTap',
event: 'itemtap'
}
]
},


initialize: function(){
Ext.getStore('Sessions').load();
},


onItemTap: function(dataview,index,target,record,e,eOpts){
console.log('itemtap');
}
});


The weird thing is that when I wrap the list view into an Ext.Container class, it works:


Ext.define('tscc.view.Sessions', {
extend: 'Ext.Container',
alias: 'widget.Sessions',


requires: [
'Ext.dataview.List'
],


config: {
id: 'sessions-view',
layout: 'card',
items: [
{
xtype: 'list',
store: 'Sessions',
itemTpl: '{title}',
listeners: [
{
fn: 'onItemTap',
event: 'itemtap'
}
],
onItemTap: function(dataview, index, target, record, e, eOpts){
console.log(dataview);
console.log(index);
console.log(target);
console.log(record);
console.log(e);
},
}
]
},


initialize: function(){
Ext.getStore('Sessions').load();
},
});


Did I misunderstand something or is this a bug?

Any help is appreciated. Thanks.

fmoseley
22 Nov 2013, 2:19 PM
I'm unable to reproduce this issue using the following fiddle.
https://fiddle.sencha.com/#fiddle/1ok
If you can modify it to reproduce the issue I will take a look at it.
What version of Touch are you using?

ThiemNguyen
25 Nov 2013, 12:21 AM
Hi fmoseley, here is the modified fiddle, please run it. Thanks,


Ext.application({
name: 'Fiddle',


launch: function() {
var view = Ext.create('Ext.NavigationView', {
fullscreen: true,


items: [{
title: 'First',
items: [{
xtype: 'button',
text: 'Push a new view!',
handler: function() {
view.push({
title: 'List View',
// xtype: 'container',

// items: [{
xtype: 'list',
itemTpl: '{title}',
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}],
listeners: [
{
fn: 'showDetails',
event: 'itemtap'
}
],
showDetails: function(){
Ext.Msg.alert('info', 'tap');
}
// }]
});
}
}]
}]
});
}
});

stevenbrent
27 Nov 2013, 1:34 PM
I'm not sure whether the parent component has anything to do with what you are encountering, but if you rework the listeners config as shown below, it works in the fiddle:


listeners: [
{
event : 'itemtap',
fn : function () {
console.log('tapped');
}
}, {
event : 'itemtaphold',
fn : function () {
console.log('tapped and held');
}
}
]


(I added that extra listener just to make sure that adding multiple listeners to the array this way worked)

ThiemNguyen
28 Nov 2013, 6:15 AM
I tried but no luck.
Also even if I wrap the list inside an Ext.Container, when building it with Sencha Cmd 4, the list still doesn't listen to itemtap event.
Fortunately, I have just resolved the issue by a workaround.
The solution is to bind the itemtap event listener dynamically on initialization. This works in all production & testing builds also.
Still very weird issue btw.