Ext.data.association.HasOne getting started example

[lightxx]

Hi guys,

I haven't used Ext JS for quite some time so please bear with me.

I'm writing a small app listing all my fridge magnets (LOL).

I have a xml file that looks like this

<?xml version="1.0" encoding="UTF-8"?><magnetic_map>
    <magnets>
        <magnet id="1">
            <title>9/11 Memorial</title>
            <contributor>Chris</contributor>
            <city>New York City, NY</city>
            <date>N/A</date>
            <country_id>US</country_id>
        </magnet>
        <magnet id="2">
            <title>Badacsonytomaj</title>
            <contributor>In-laws</contributor>
            <city>Badacsonytomaj</city>
            <date>N/A</date>
            <country_id>HU</country_id>
        </magnet>
    </magnets>
    <countries>
        <country id="US">            
            <name>USA</name>
            <continent>North America</continent>
            <flag>usa.png</flag>
        </country>
        <country id="HU">
            <name>Hungary</name>
            <continent>Europe</continent>
            <flag>hungary.png</flag>
        </country>
    </countries>
</magnetic_map>

the idea is to deduplicate the country information, a classic one-to-one relationship.

based on that xml file I want to use HasOne associations to display the country information of each magnet.

this is what my javascript looks like

Ext.require([
    'Ext.data.*',
    'Ext.grid.*'
]);


Ext.onReady(function(){
    Ext.define('Magnet',{
        extend: 'Ext.data.Model',
        fields: [
            { name: 'id', mapping: '@id' }, 
            'title', 'contributor', 'city', 'country_id'
        ],
        associations: [{ type: 'hasOne', model: 'Country' }],
        proxy: {
            type: 'ajax',
            url: '/resources/xml/magnetic.xml',
            reader: {
                type: 'xml',
                root: 'magnets',
                record: 'magnet'
            }
        }
    });


    Ext.define('Country',{
        extend: 'Ext.data.Model',
        fields: [
            { name: 'id', mapping: '@id' }, 'name', 'continent', 'flag'
        ],
        proxy: {
            type: 'ajax',
            url: '/resources/xml/magnetic.xml',
            reader: {
                type: 'xml',
                root: 'countries',
                record: 'country'
            }
        },
    });
    
    // create the Magnet Data Store
    var magnetStore = Ext.create('Ext.data.Store', {
        model: 'Magnet',
        autoLoad: true        
    });
    
    // create the grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: magnetStore,
        columns: [
            {text: "ID", flex: 1, dataIndex: 'id'},
            {text: "Title", width: 180, dataIndex: 'title', sortable: true},
            {text: "Contributor", width: 180, dataIndex: 'contributor', sortable: true},
            {text: "City", width: 180, dataIndex: 'city', sortable: true},
            {text: "Country", width: 180, dataIndex: 'country_id', sortable: true,
                renderer: function(value, metaData, record, row, col, store, gridView){
                    record.getCountry( function(country, operation){  
                        // always returns the first country (USA)
                    } );
                    debugger;                                
                }
            }                        
        ],
        renderTo:'example-grid',
        width: 800,
        height: 200
    });
});

unfortunately record.getCountry always returns the first country from the XML.

any ideas what i missed?

thanks,
tom

[lightxx]

ok. let me rephrase this question.

anyone got a complete working example (not just a stub) of the HasOne association?

thanks,
tom