PDA

View Full Version : Association in XTemplate



jeloff
23 Jun 2014, 7:42 AM
Hi all,

I can't seem to find other topics in the SenArch forums regarding this issue. I tried a few search terms and came up with nothing.

How do you use associations in XTemplates?

Usually you just put curly braces around the field you want to access ie {category} and then some Ext Voodoo happens and you have the category on your webpage.

I haven't been able to do this with hasOne associations though and I'm unsure where to look for the information.

I have the following model.

Ext.define('App.model.matchModel', {
extend: 'Ext.data.Model',

requires: [
'Ext.data.Field',
'Ext.data.association.HasOne'
],
uses: [
'App.model.giftModel',
'App.model.needModel'
],

fields: [
{
name: 'status',
type: 'int'
}
],

hasOne: [
{
associationKey: 'gift',
model: 'App.model.giftModel'
},
{
associationKey: 'need',
model: 'App.model.needModel'
}
]
});

I'm also not 100% sure what the json should look like. I'm assuming something like this? My store root is "results"



{
"results":{
"status": 0,
"gift": <myGiftInfo>,
"need": <myNeedInfo>
}
}

Is this the correct format for the json? I can access the field "status', but I can't seem to get to the gift and need. I have tried <tpl for='gift'></tpl>, but that didn't work. So I'm not really sure if it's my json being wrong or if my Model/Store isn't setup correctly.

I've read some topics stating you should "intercept" the data going to the tpl from the model and then create your own arrays. Though I'm not sure how one would do this in SenArch.

Any advice would be helpful, even if it's a link to documentation that I missed.

Thanks in advance,
Justin.

evant
24 Jun 2014, 4:16 PM
https://fiddle.sencha.com/#fiddle/70c

jeloff
25 Jun 2014, 12:33 AM
Thanks for the reply.

However if I modify the example to the way Sencha Architect does it.

Ext.application({
name: 'Fiddle',

launch: function() {

Ext.define('Customer', {
extend: 'Ext.data.Model',
fields: ['name'],
hasOne: {associationKey: 'address', model: 'App.model.Address'}
});

Ext.define('App.model.Address', {
extend: 'Ext.data.Model',
fields: ['city']
});

var store = new Ext.data.Store({
model: 'Customer'
});

// Goes through reader
store.loadRawData([{
name: 'Customer 1',
address: {
city: 'Foo'
}
}]);

new Ext.view.View({
renderTo: document.body,
store: store,
itemTpl: '{name} - {Address.city}' //I have tried many variations here.
});
}
});

It doesn't work anymore. The example you gave is what I expected should work. I'm just not sure how to do it when the definition is changed to the "App.model.Model" notation.