Xtemplate unable to display value of store

Question

I have this store

Ext.define('Reservacion',{
    extend: 'Ext.data.Model',
    fields: [
        {name:'id', type:'int'},
        {name:'area_comun_id', type:'string'},
        {name:'area_comun.nombre', type:'string'}

});

Ext.create('Ext.data.Store', {
        storeId:'store',
        model:'Reservacion',
        proxy: {
            type: 'ajax',
            url: '/reservacion/get',
            reader: {
                type: 'json'
            }
        },
        autoLoad: true
    })

here is the response data

[{"id":1,"area_comun_id":1,"inmueble_id":1,,"status":true,"formato_lista_invitados":"1",
  "area_comun":{"id":1,
                "condominio_id":1,
                "nombre":"Pool",
                "descripcion":"parrillera",
                "costo":100.0,
                "status":true,"foto":null}
}]

so I'm trying to display the value for area_comun.nombre in a mark but the Xtemplate does not display that value , can someone help me with this? Here is my Xtemplate code

 '<tpl for".">',
                '    <div class="ticket-wrapper">',
                '        <span class="title">Reservado: <span class="data">{fecha_uso:date("Y-m-d")}</span></span>',
                '        <span class="description">De:{hora_inicio} a {hora_fin} Observacion: {observaciones}  </span>',
                '    </div>',
                '    <span class="description">{area_comun.nombre}</span>        ',
 '</tpl>'

all other values ​​are shown exept {area_comun.nombre}

Answer 1

I think your problem is that your store is expecting a field with name 'area_commun.nombre', but you're actually retrieving an object called 'area_commun'. Try the following in your store:

Ext.define('Reservacion',{
extend: 'Ext.data.Model',
fields: [
    {name:'id', type:'int'},
    {name:'area_comun_id', type:'string'},
    {name:'area_comun', type:'auto'}

});

Then you'll have access to all of the "area_commun" varibles.