View Full Version : itemTap and itemSelector is broken for nested data in xtemplate

7 Sep 2011, 9:10 AM
When using an xtemplate to render a nested list of associated objects, itemtap on the nested items fails, because ultimately the click event tries to do a store.getAt(index) applying the index to the parent rather than the child data.

Mock Data:

[{ "start_at":"2011-06-19T17:55:01Z",
"events": [{ "id":1, "title":"Mid term Exam", "start_at":"2011-06-19T17:55:01Z", "end_at":"2011-06-20T17:55:01Z" }]
"events": [
{ "id":2, "title":"Class Party", "start_at":"2011-06-21T17:55:01Z", "end_at":"2011-06-26T17:55:01Z" },
{ "id":3, "title":"Anna Kendrick's birthday", "start_at":"2011-06-21T17:55:01Z", "end_at":"2011-06-26T17:55:01Z" },
{ "id":4, "title":"Anna Kendrick's birthday again", "start_at":"2011-06-21T17:55:01Z", "end_at":"2011-06-26T17:55:01Z" }


Ext.regModel('CalendarDate', { fields: ['start_at'],
hasMany: { name: 'events', model: 'CalendarItem'}
Ext.regModel('CalendarItem', {
fields: ['id', 'title', 'body',
{name: 'start_at', type:'date'},
{name: 'end_at', type:'date', dateFormat: 'c'},


this.list = new Ext.List({ itemSelector: 'div.events',
store: new Ext.data.JsonStore({
model: 'CalendarDate',
proxy: {
type: 'ajax',
url : '/m/data/calendar.json'
itemTpl: new Ext.XTemplate(
'<div class="date-entry">',
'<tpl for="events">',
'<div id="event-{id}" class="events">',
'{title} ',
'<time class="grey_text">',
'{start_at:date("M d, Y")} - {end_at:date("M d, Y")}',

Clicking on the first three sort of works, in that it doesn't throw an error. But anything over count(root) gives

Uncaught TypeError: Cannot read property 'id' of undefined

This is similar behavior to this thread (http://www.sencha.com/forum/showthread.php?125506-Nested-Json-item-selection.)http://www.sencha.com/forum/showthread.php?125506-Nested-Json-item-selection.

Trace from the console

. Uncaught TypeError: Cannot read property 'id' of undefined
. Ext.extend.getKeysencha-touch-debug.js:1390?
. Ext.extend.addsencha-touch-debug.js:1372?
. Ext.AbstractStoreSelectionModel.Ext.extend.doMultiSelectsencha-touch-debug.js:22201?
. Ext.AbstractStoreSelectionModel.Ext.extend.doSelectsencha-touch-debug.js:22176?
. Ext.AbstractStoreSelectionModel.Ext.extend.selectWithEventsencha-touch-debug.js:22106?
. Ext.DataViewSelectionModel.Ext.extend.onItemClicksencha-touch-debug.js:22460?
. anonymous:5?
. (anonymous function)sencha-touch-debug.js:4428?
. Ext.gesture.Gesture.Ext.extend.firesencha-touch-debug.js:18588?
. Ext.gesture.Tap.Ext.extend.onTouchEndsencha-touch-debug.js:18781?
. Ext.gesture.Manager.Ext.AbstractManager.onTouchEndsencha-touch-debug.js:18282?
. (anonymous function)sencha-touch-debug.js:3421?

The problematic line is actually in onItemClick where it says

onItemClick: function(e) {
var view = this.view,
node = view.findTargetByEvent(e);

if (node) {
this.selectWithEvent(view.getRecord(node), e);
} else {
return false;

The view.getRecord returns undefined, because view.getRecord just gets the index at the location of the parent, not the child nodes.


21 Sep 2011, 5:05 AM
hi brink,
did you find any solution for this problem? i also have similar problem. please do let me know if you find any solution. thanks

21 Sep 2011, 7:01 AM
I did not. I basically don't use associated objects because their implementation seems broken.

To resolve this problem I just made a couple templates and stuck them together.

11 Oct 2011, 3:41 PM
Hi brink,

I have similar situation, where I am receiving nested data in my json. How did you solve the issue by using "couple of templates" as you mentioned. Could you please provide your working solution?


11 Oct 2011, 4:13 PM
Heya, at one point I was munging the output of two templates onto each other, eg
tpl1 for the parent object,
tpl2 for the association

tpl.apply(parent) + tpl2.apply(associated)

Sort of a suboptimal solution IMHO

While I was resolving that issue more satisfactorily, we changed our requirements so I kind of dodged a bullet on solving the issue :) I"m sorry, I don't have a real solution for you.