PDA

View Full Version : How to access nested models from store in ExtJs 4



jim@carroll.net
2 Aug 2012, 11:17 AM
Having difficulty getting my head around the 'Associations' feature of Models and how
a developer can access the nested data through the association.

Here's a simple XML file we're trying to parse.


<?xml version="1.0" encoding="UTF-8"?>
<contacts>
<contact>
<id>1</id>
<name>Bob Jones</name>
<emails>
<email>
<addr>bjones1@dom.com</addr>
<display>B. Jones 1</display>
</email>
<email>
<addr>bjones2@dom.com</addr>
<display>B. Jones 2</display>
</email>
</emails>
</contact>
<contact>
<id>2</id>
<name>John Rodeo</name>
<emails>
<email>
<addr>jrodeo1@dom.com</addr>
<display>J. Rodeo 1</display>
</email>
<email>
<addr>jrodeos2@dom.com</addr>
<display>J. Rodeo 2</display>
</email>
</emails>
</contact>
</contacts>


And here's the related Models


Ext.define('MyApp.model.Contact', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.Emails'
],

fields: [
{
name: 'id'
},
{
name: 'name'
}
],

hasMany: {
model: 'MyApp.model.Emails',
autoLoad: true,
foreignKey: 'addr',
name: 'emailAddresses'
}
});

Ext.define('MyApp.model.Emails', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.Contact'
],

idProperty: 'addr',

fields: [
{
name: 'addr'
},
{
name: 'display'
}
],

belongsTo: {
model: 'MyApp.model.Contact'
}
});


And finally, here's the store:


Ext.define('MyApp.store.MyXmlStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Contact'
],

constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyXmlStore',
model: 'MyApp.model.Contact',
proxy: {
type: 'ajax',
url: 'data/data.xml',
reader: {
type: 'xml',
record: 'contact'
}
}
}, cfg)]);
}
});


We created a simple Grid and link it to the Store...and presto,
it shows the contacts (quick ascii rendering)

+---------------------------+
| My Grid Panel |
+-----+---------------------+
| Id | Name |
+-----+---------------------+
| 1 | Bob Jones |
| 2 | John Rodeo |


But we are at a complete loss as to how to retrieve the associated Email
records.

I've read that the GridPanel may not be able to correctly render associated
data. That's no problem for us -- we're just trying to get our heads around
how we can access it programatically using this mock-up data.

For example, let's say we wanted to create a simple onXmlstoreLoad event attached
to the store and we wanted to just console.log() the email addresses after loading
-- What would be the correct syntax?

We've tried the recommended approach:


onXmlstoreLoad: function(store, records, successful, operation, options) {
console.log(store.emailAddresses.getAt(0));
}


But this results in an undefined reference.

I recognize it may boil down to us describing our Models incorrectly, but we've tried
dozens of different configurations and can't figure out whether or not the problem
is the data's not getting into the store...or whether or not we can't refer to is
syntactically correctly.

a.premkumar
15 Oct 2012, 1:07 AM
Hi,

Try configuring the proxy for each model other than in the store. It might work. Once I made it work that way. And to configure the association, its better to follow the below link.

http://mytech.dsa.me/en/2011/05/13/extjs-right-way-association-bugs-proble/

Hope it was some help.

Regards,
Premkumar

jim@carroll.net
15 Oct 2012, 3:44 AM
I'd lost track of this thread, and forgot to cycle back with the solution. This site has a collection of really excellant best practices related to Extjs Models & Stores

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