1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    4
    Vote Rating
    3
    matfin is on a distinguished road

      1  

    Default Answered: Model association and views

    Answered: Model association and views


    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.
    Code:
    {
        "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)

    Code:
    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)

    Code:
    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)

    Code:
    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

  2. Oh - you're not fully qualifying the model name. Try this:

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

  3. #2
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    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:

    Code:
    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.
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    4
    Vote Rating
    3
    matfin is on a distinguished road

      0  

    Default


    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:

    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 ?

    Code:
    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

  5. #4
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    It should be inside the data object, which is what gets exposed to the template
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  6. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    4
    Vote Rating
    3
    matfin is on a distinguished road

      0  

    Default


    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

  7. #6
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Hmm what happens if you switch your
    console.log(record); for console.log(record.getData());?
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  8. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    4
    Vote Rating
    3
    matfin is on a distinguished road

      0  

    Default


    I get the following:

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

  9. #8
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Oops I should have said console.log(record.getData(true)); - that should force it to load the associations if they are present
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  10. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    4
    Vote Rating
    3
    matfin is on a distinguished road

      0  

    Default


    I get the same again....

  11. #10
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Answers
    29
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


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

    Code:
    Ext.define('Application.model.Group', {
        extend: 'Ext.data.Model',
        config:	{
            fields: [
    	        {name: 'name', type: 'string'}
            ],
            hasMany: {model: 'Team', name: 'teams'}
        }
    });
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

Thread Participants: 2

Tags for this Thread