How to render a hasmany association with a template?

[Salva]

Let's say I have a simple hasMany relation such as the one in the docs (using localstorage):


Ext.regModel('Product', {
fields: [
{name: 'id', type: 'int'},
{name: 'user_id', type: 'int'},
{name: 'name', type: 'string'}
],
proxy: {
type: 'localstorage',
id: 'myapp-Products'
}
});

Ext.regModel('User', {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
],
hasMany: {model: 'Product', name: 'products'},
proxy: {
type: 'localstorage',
id: 'myapp-Users'
}
});


When I load a User model, user.data.products is an empty array. I can access the related data (products in the previous example) through the user.products(), after calling user.products().load(). However, user.data.products keeps being an empty array. Thus, creating a simple template such as:



myTemplate = new Ext.XTemplate( '<tpl for=".">' +
' <h2>{name}</h2>' +
' Products:' +
' <ul>' +
' <tpl for="products"><li>{name}</span></li></tpl>' +
' </ul>' +
'</tpl>');


renders no products when called with the user object.

Of course, when I call user.products().load() I could manually insert the elements in the .products() store into the user.data.products array, but it sounds like I big ugly hack. Is there a proper/better way to render related data with a template? (or to load it into the model object).

Thanks,
Salva.

[khehrahs]

I also need help with this.

Salva, did you have any luck with this?

[conscience]

Hmmpf has nobody an idea ? I have the same problem ...

[rwheadon]

The silence can only suggest that this can't be done.

[giovannicandido]

I'm trying to update an panel with template generated of a model:


mostrarDetalhes: function(grid, record){
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<p>{rua}</p>',
'</tpl>' );
var endereco = tpl.apply(record.enderecos().data.items);
console.log(endereco);
console.log(record.enderecos());
this.getDetalhes().update(endereco); }
I try various combinations of record.enderecos(), record.enderecos.data
If XTemplate expects an array there is no way to pass a model, because model use Objects and arrays of objects to represent the data.
I will try later iterate over the record object and getting an array and pass to XTemplate or creating an result direct.

[giovannicandido]

How I made this works:

mostrarDetalhes: function(grid, record){
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="endereco">',
'<p><span class="titulo">Endereço - {#}</span></p>',
'<p>Rua: {rua}, {numero}</p>',
'<p>Bairro: {bairro}</p>',
'<p>Cidade: {cidade} - {estado}</p>',
'<p>CEP: {cep}</p>',
'<p>Complemento: {complemento}</p>',
'</div>',
'</tpl>'
);
var enderecoTplResult = "";
record.enderecos().each(function(end){
enderecoTplResult = enderecoTplResult.concat(tpl.apply(end.data));
console.log(enderecoTplResult);
});

this.getDetalhes().update(enderecoTplResult);
}

Iterate over the association and get the data property

[giovannicandido]

Or better:

mostrarDetalhes: function(grid, record){
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="endereco">',
'<p><span class="titulo">Endereço - {#}</span></p>',
'<p>Rua: {rua}, {numero}</p>',
'<p>Bairro: {bairro}</p>',
'<p>Cidade: {cidade} - {estado}</p>',
'<p>CEP: {cep}</p>',
'<p>Complemento: {bairro}</p>',
'</div>',
'</tpl>'
);
var enderecoTplResult = "";
var data = [];
record.enderecos().each(function(end){
data.push(end.data);
});
enderecoTplResult = tpl.apply(data);
this.getDetalhes().update(enderecoTplResult);
}

The difference is the construction of data array for pass to template. It allows the count of iteration using the {#}

[Sébastien.Volle]

This is how I do it as well with Ext JS 4.x and this leaves a lot to be desired.

It completely breaks the encapsulation and API provided by Ext.data.Model and requires you to dwell in the bowels of the class implementation.

I wish XTemplate would be extended to work more nicely with associations.

[Izhaki]

As of 4.1, the getData(True) of a model record will return associated data that can be used with a template - it's just a question of calling it.