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.