View Full Version : Nested models in DataView with grouped display

12 Mar 2012, 7:48 AM

I have a model with another one nested inside like this:

Ext.define('SVPE.model.Activity', {
extend: 'Ext.data.Model',
fields: ['source', 'timestamp', 'images'],
associations: [
{type: 'hasMany', model: 'Image', name: 'images'}

Ext.define('SVPE.model.Image', {
extend: 'Ext.data.Model',
fields: ['url'],
belongsTo: 'Activity'

Now I would like to display that data in a DataView, grouped by the first model's records:

tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="header">',
'<span class="source">{source}</span>',
'<span class="timestamp">{timestamp}</span>',
'<tpl for="images">',
'<div class="thumb-wrap">',
'<div class="thumb">',
'<img src="{url}" />',

Is this even possible? What do I have to set as itemSelector? Or is there another way of displaying data like that using another component?


12 Mar 2012, 10:23 AM
Dealing with associations in the widgets like DataView aren't the easiest. If the data is loaded then you can access it using a template method in the xtemplate.

13 Mar 2012, 12:40 AM
Ok, but how do I specify a itemSelector in this case? I can't assign it a div generated by the first level template for loop as I want to select the images and not the groups. But when I set it to the image div itself I get an out of range exception. It seems as if the itemSelector div's are directly mapped to the root level array nodes. Is there a way to customize this?

13 Mar 2012, 2:15 AM
The exception occurs in AbstractView.js in the function updateIndexes(). It loops all generated elements that match the item selector class and assigns them the corresponding record:

updateIndexes : function(startIndex, endIndex) {
var ns = this.all.elements,
records = this.store.getRange(),

startIndex = startIndex || 0;
endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
for(i = startIndex; i <= endIndex; i++){
ns[i].viewIndex = i;
ns[i].viewRecordId = records[i].internalId; // fails here of course: ns.length > records.length in my case
if (!ns[i].boundView) {
ns[i].boundView = this.id;

This assumes a one-to-one relationship between the top-level records and the generated items. In my case there generated items should be the images from the nested model. How can I solve this problem?

10 Aug 2012, 11:10 AM
Did this ever get solved? I'm facing the same issue

22 Mar 2013, 9:28 PM
Got the same problem here too.

The xtemplate generates nodes that are then mapped one to one onto the data in the records array. Your xtemplate is generating too many of those nodes, either the selector is wrong, not explicit enough, or you have a template that is doing things twice. In my case it was the grouping and grouping summary features of the grid that both generated <tr> tags.