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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi