PDA

View Full Version : Ext associations



anarchos78
3 Apr 2012, 12:01 AM
Hello,
I have a question: The “associations” feature (HasMany-belongsTo) of ExtJs library is applicable only in nested JSON data? Is it doable to define two different stores with two different data retrieving “urls” (and two different models with the association definition?) and the “hasMany” works? Or, I have to define only one store (with one data retrieving “url” and a JSON output that is nested and reflects the data associations of the database) and then with the help of models “format” the data in a way that Ext can consume?
If the second case it is true, how someone could handle large volume data (let’s say a blog: users=>blog-post=>blog-reply) using the Ext “association” feature?
Sorry for my abstract writing style,
Tom,
Greece

börn
3 Apr 2012, 12:10 AM
erm.... don't understand ;) - can you ask again in a more verbatim style? ;)

JambaFun
3 Apr 2012, 12:11 AM
No problem understanding. Your best bet is to load associated data in a second call. You get stores automatically created on your primary model and these could be loaded separately.

anarchos78
3 Apr 2012, 4:47 AM
Let's give an example:
The post model




Ext.define('app.model.Post', { extend:'Ext.data.Model', fields:[ {name:'id', type:'int'}, {name:'title'}, {name:'body'} ], proxy:{ type:'ajax', url:'data/posts.json', reader:{ type:'json', root:'posts' } }, hasMany:[ { name:'categories', model:'app.model.Category' } ] })

The Category model




Ext.define('app.model.Category', { extend:'Ext.data.Model', fields:[ {name:'id', type:'int'}, {name:'name', type:'string'} ], proxy:{ type:'ajax', url:'data/categories.json', reader:{ type:'json', root:'categories' } } });



The application:





Ext.Loader.setConfig({ enabled: true }); Ext.application({ name: 'app', autoCreateViewport:false, enableQuickTips:false, requires:[ 'app.model.Post', 'app.model.Category' ], launch: function() { app.model.Post.load(1, { success: function(record, op){ console.log(record.categories()) } }) } });


The above code block is not working. In my opinion it doesn't work because in the second model i am using a second url to "pull" the data. I think extjs needs a format like:



{ "success":true, "posts":[ { "id":1, "title":"hi", "body":"there", "categories":[ { "id":1, "name":"hardware" }, { "id":3, "name":"software" } ] }, { "id":2, "title":"so", "body":"long", "categories":[ { "id":1, "name":"hardware" }, { "id":2, "name":"" } ] } ] }


The working code is:
The post model




Ext.define('app.model.Post', { extend:'Ext.data.Model', fields:[ {name:'id', type:'int'}, {name:'title'}, {name:'body'} ], proxy:{ type:'ajax', url:'data/posts.json', reader:{ type:'json', root:'posts' } }, hasMany:[ { name:'categories', model:'app.model.Category' } ] })

The Category model




Ext.define('app.model.Category', { extend:'Ext.data.Model', fields:[ {name:'id', type:'int'}, {name:'name', type:'string'} ] });



The application:





Ext.Loader.setConfig({ enabled: true }); Ext.application({ name: 'app', autoCreateViewport:false, enableQuickTips:false, requires:[ 'app.model.Post', 'app.model.Category' ], launch: function() { app.model.Post.load(1, { success: function(record, op){ console.log(record.categories()) } }) } });


and the posts.json file:




{ "success":true, "posts":[ { "id":1, "title":"hi", "body":"there", "categories":[ { "id":1, "name":"hardware" }, { "id":3, "name":"software" } ] }, { "id":2, "title":"so", "body":"long", "categories":[ { "id":1, "name":"hardware" }, { "id":2, "name":"" } ] } ] }


By using the second (working) code block, I have to pull the whole database in one request! Are there any ideas in how to load what it is really needed?

Thanks

iesdeveloper
4 Apr 2012, 5:26 PM
After retrieving the desired Post record, you need to call .load() again on the record's related categories() store:


app.model.Post.load(1, {
success: function(record, op){
record.categories().load({
success: console.log(record.categories())
});
}
});