Model association and views

[matfin]

Hi Everyone.

I am working on model association in my Sencha Touch 2 app and want to be able to create a single view that shows four groups with four teams listed underneath each group. This is not going to be a nested list. I am a bit lost on what needs to be done and have been searching google for answers to this but so far have had no luck. I have also been reading up on models in the documentation and still can't get things working as I want.

Here is what I have so far.

Sample of json feed I am working with.

{
    "info": {
        "type": "feed",
        "date_ts": 1335190386,
        "group_count": 4
    },
    "groups": [{
        "name": "Group A",
        "teams": [{
            "id": "t367",
            "team_info": null,
            "competition_data": {
                "attribute_one": "0",
                "attribute_two": "0",
                "attribute_three": "0",
                "attributes": {
                    "Type": "Full"
                }
            }
        }, {
            "id": "t517",
            "team_info": null,
            "competition_data": {
               "attribute_one": "0",
                "attribute_two": "0",
                "attribute_three": "0",
                "attributes": {
                    "Type": "Full"
                }
            }
        },
}]

The Group model (models/Group.js)

Ext.define('Application.model.Group', {
	extend: 'Ext.data.Model',
	config:	{
		fields: [
			{name: 'name', type: 'string'}
		]},
		hasMany: {model: 'Team', name: 'teams'}
});

The Team model (models/Team.js)

Ext.define('Application.model.Team', {
	extend: 'Ext.data.Model',
	config:	{
		fields: [
			{name: 'id', type: 'string'},
			{name: 'team_info', type: 'string'},
			{name: 'attribute_one', type: 'int', mapping: 'competition_data.attribute_one'},
			{name: 'attribute_two', type: 'int', mapping: 'competition_data.attribute_two'},
			{name: 'away_drawn', type: 'int', mapping: 'competition_data.attribute_three'},
		]},
		belongsTo: 'Group'
});

The Groups store (store/Groups.js)

Ext.define('Application.store.Groups', {
	extend: 'Ext.data.Store',
	requires: [
		'Ext.data.proxy.JsonP'
	],
	config:	{
		model: 'Application.model.Group',
		autoLoad: true,
		proxy: {
			type: 'jsonp',
			url: 'http://www.domain.tld/feed_url/',
			reader: {
                type: 'json',
                rootProperty: 'groups'
            }
		}
	}
});

Would I be correct in assuming that this setup will automagically fetch all groups, then assign teams to each group so I can just sit back and watch this happen?
What should I be looking for?
When everything has finished loading should there be a collection of groups with teams automatically associated with them?
Finally, can I display this data using a regular Ext.List?

Documentation and examples are scant online, so any help would be very much appreciated. Any questions just shout.

Thanks,

Matt

[edspencer]

Yes, that looks like the correct setup. When you come to define your List/DataView template, your Group models should each have a pre-populated Teams array inside their data, so you should be able to specify a template like this:

Ext.create('Ext.List', {
    store: {
        model: 'Application.model.Group',
        autoLoad: true,
        proxy: {
            type: 'jsonp',
            url: 'http://www.domain.tld/feed_url/',
            reader: {
                type: 'json',
                rootProperty: 'groups'
            }
        }
    },
    
    tpl: [
        '<div class="x-group">',
            '<h1>{name}</h1>',
            '<ul>',
                '<tpl for="teams">',
                    '<li>Team {name}</li>',
                '</tpl>',
            '</ul>',
        '</div>'
    ]
});

The <tpl for="teams"> will iterate over each of the Teams inside the Group, so the {name} inside that loop refers to the Team name.

[matfin]

Hi Ed,

Thanks for the reply. Unfortunately whereas before I was able to see the Group names as a list, nothing comes up now. I removed the line declaring the itemTpl from the view and it was blank. I replaced the itemTpl in the view and the list re-appeared. Here is the code:

Ext.define('Football.view.Group' , {
	extend: 'Ext.List',
	xtype: 'grouppanel',
	requires: ['Football.store.Groups'],
	config: {	
		xtype: 'list',
		cls: 'listofgroups',
		itemTpl: '{name}',
		store: 'Groups',
		listeners: {
			itemtap: function(data, index){
				var record = data.getStore().getAt(index);
				console.log(record);
			},
			painted: function(){
				button = Ext.ComponentQuery.query('#statsbackbutton')[0];
				button.go = {container: 'resultspanel', panel: 'resultspanellist'};
				setTimeout(function(){button.show();}, 500);
			},
			erased: function(){
				button = Ext.ComponentQuery.query('#statsbackbutton')[0];
				button.hide();
			}
		}
	}
});

When I replaced it, and tapped on one of the list items, this is what I see from logging to the console. Does this output look right ?

Group.js:13
Object
_data: Object
data: Object
id: "ext-record-26"
internalId: "ext-record-26"
modified: Object
phantom: true
raw: Object
name: "Group C"
teams: Array[4]
0: Object
competition_data: Object
id: "t535"
team_info: null
__proto__: Object

1: Object
2: Object
3: Object
length: 4
__proto__: Array[0]

__proto__: Object

stores: Array[1]
__proto__: Objec

I see the teams have been linked to the object under 'raw' but should I be seeing something like Object.teams ?

Thanks,

Matt

[edspencer]

It should be inside the data object, which is what gets exposed to the template

[matfin]

Yep as I suspected but it's not happening. Wonder could it be anything else? I'll keep hacking away and pray a solution comes.

Thanks

[edspencer]

Hmm what happens if you switch your

console.log(record); for console.log(record.getData());?

[matfin]

I get the following:

Object

• id: "ext-record-13"
• name: "Group A"
• __proto__: Object

[edspencer]

Oops I should have said console.log(record.getData(true)); - that should force it to load the associations if they are present

[matfin]

I get the same again....

[edspencer]

Ah - your hasMany association is actually outside your config object, place it inside instead, like this:

Ext.define('Application.model.Group', {
    extend: 'Ext.data.Model',
    config:	{
        fields: [
	        {name: 'name', type: 'string'}
        ],
        hasMany: {model: 'Team', name: 'teams'}
    }
});