Association Sample in extjs 4.2:

Question

Can any one please point me to a working example of association (with hasMany and belongsTo) in ExtJS. Please don't point me to Sencha docs or any examples related to Sencha because I had tried almost everything but none of them works...

Violetteviolin

Answer 1

Running sample (turn on your browser console):

http://jsfiddle.net/4TSDu/52/

Ext.define('My.model.Author', {
    extend:'Ext.data.Model',
    fields:[
        'name'
    ]
});

Ext.define('My.model.Comment', {
    extend:'Ext.data.Model',
    fields:[
        'emailAddress',
        'body'
    ]
});

Ext.define('My.model.BlogPost', {
    extend:'Ext.data.Model',
    fields:[
        'title',
        'body'
    ], 
     belongsTo:[
        {
            name:'author',
            instanceName:'author',
            model:'My.model.Author',
            getterName:'getAuthor',
            setterName:'setAuthor',
            associationKey:'author'
        }
    ], 
    hasMany:[
        {
            name:'comments',
            model:'My.model.Comment',
            associationKey:'comments'
        }
    ], 
    proxy:{
        type:'ajax',
        url:'https://dl.dropboxusercontent.com/u/1015920/Ext/blog-posts.json',
        reader:{
            type:'json',
            root:'data'
        }
    }
});

My.model.BlogPost.load(1, {

    success:function(record, operation){

        console.log(record.get('title')); // "some title"

        console.log(record.getAuthor().get('name')); // "neil"

        console.log(record.comments().getCount()); // 2

    }
});

Read more here:

http://extjs-tutorials.blogspot.ca/2012/05/extjs-belongsto-association-rules.html

http://extjs-tutorials.blogspot.ca/2012/05/extjs-hasmany-relationships-rules.html

The sample data used:

{
    "data": [
        {
            "id": 1,
            "title": "some title",
            "body": "some body",
            "author": {"id":1, "name": "neil"},
            "comments": [
                {
                    "id":55,
                    "emailAddress": "[email protected]",
                    "body": "test comment"
                },
                {
                    "id":66,
                    "emailAddress": "[email protected]",
                    "body": "another comment"
                }
            ]
        }
    ]
}

Zaratite

Hi Neil, Sorry for the delay in my response. I tried to run this but was not able to get any output in the console. I placed the entire code in an onReady function, created a json file with the data you had mentioned. The data is being fetched (checked the firebug console) but it doesn't seem like the success function is ever called. And I was not able to see any console output in the jsFiddle which you had given. Could you please let me know if I'm doing something wrong here... – Violetteviolin

tested/works in chrome, firefox and safari. am using remote data so won't work in IE (though maybe in IE10). which are you using? – Zaratite

Hi Neil, I tried with firefox 20.0.1, chrome 26.0 and IE 8. I found that the json file itself is not being fetched in the jsFiddle now and this is due to firewall and security setting (company policy). Is there a way to add the data inline in the JsFiddle. Also, please let me know if the way I'm trying to run the sample from eclipse is correct(its in my previous comment). There I was able to get the json data but the success function was never called. I tried that with firefox 20 with firebug installed in it... – Violetteviolin

can you put the json file on an internal server ? – Zaratite

Hi..I had already tied to place it in my tomcat server both as json (localhost:8080/QAFWeb/data/data.json) and a text file (localhost:8080/QAFWeb/data/data.txt), it shows a status message as 200 OK but when I check in firebug, the file size is 0kb. On checking the request I found that there is no response tab but just the Params and Header tab in it. Also I found that in the header tab the Accept parameter has values as text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8, so I tried to place it as a html file but still the size of the file is 0kb. – Violetteviolin

try running it on the same domain as the exjs app itself. – Zaratite

Hi Sorry Neil, I'm not able to understand what you mean by same domain as the extjs app... – Violetteviolin

Hi Neil, Tried it in my home PC with IE 10 and this works fine. Thanks a lot. Happy to see the first working sample of association...Just to confirm, would there be a problem if I try to put the proxy and ajax call in a store instead of model?...Is there a sample for that as well... – Violetteviolin

And do not forget to add all models from associations to the 'requires' section of the model if you use a separate file for each model. – Paz