PDA

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



brink
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" }]
},
{
"start_at":"2011-06-21T17: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" }
]
}]


Model:


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'},
'allday']
});


List:

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">',
'<h2>{start_at:date("d")}</h2>',
'<h3>{start_at:date("D")}</h3>',
'<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")}',
'</time>',
'</div>',
'</tpl>',
'</div>')
});




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?

Lastly:
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.

HTH

irfaniqbal
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

brink
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.

pd1980
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?

Thanks,
PD

brink
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.