1. #1
    Touch Premium Member
    Join Date
    May 2007
    Posts
    23
    Vote Rating
    1
    Salva is on a distinguished road

      0  

    Default How to render a hasmany association with a template?

    How to render a hasmany association with a template?


    Let's say I have a simple hasMany relation such as the one in the docs (using localstorage):
    Code:
    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:

    Code:
    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.

  2. #2
    Sencha User
    Join Date
    Sep 2010
    Posts
    1
    Vote Rating
    0
    khehrahs is on a distinguished road

      0  

    Default


    I also need help with this.

    Salva, did you have any luck with this?

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    13
    Vote Rating
    0
    conscience is on a distinguished road

      0  

    Exclamation


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

  4. #4
    Sencha User
    Join Date
    Aug 2008
    Posts
    2
    Vote Rating
    0
    rwheadon is on a distinguished road

      0  

    Default I'm guessing this isn't supported?

    I'm guessing this isn't supported?


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

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    11
    Vote Rating
    1
    giovannicandido is on a distinguished road

      0  

    Exclamation I'm with difficulties in this too

    I'm with difficulties in this too


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

    HTML Code:
    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.

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Posts
    11
    Vote Rating
    1
    giovannicandido is on a distinguished road

      0  

    Thumbs up It Works

    It Works


    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

  7. #7
    Sencha User
    Join Date
    Oct 2010
    Posts
    11
    Vote Rating
    1
    giovannicandido is on a distinguished road

      0  

    Default


    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 {#}

  8. #8
    Ext JS Premium Member Sébastien.Volle's Avatar
    Join Date
    Apr 2011
    Location
    Grenoble, France
    Posts
    70
    Vote Rating
    0
    Sébastien.Volle is on a distinguished road

      0  

    Default


    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.
    aka Seboss

  9. #9
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Vote Rating
    13
    Izhaki will become famous soon enough

      0  

    Default


    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.

Similar Threads

  1. [FIXED] Can't have more than 1 hasMany association
    By stormin_walker in forum Sencha Touch 1.x: Bugs
    Replies: 20
    Last Post: 18 Dec 2013, 7:27 AM
  2. [DataView] cant render the template
    By localhost in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 12 Oct 2008, 2:23 PM
  3. [2.2] GridView: body template ignored on first render
    By vivid-planet in forum Ext 2.x: Bugs
    Replies: 0
    Last Post: 5 Aug 2008, 11:35 PM
  4. When does the template render?
    By shenku in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 12 Nov 2007, 10:54 PM
  5. Replies: 4
    Last Post: 20 Aug 2007, 9:18 AM

Thread Participants: 6

Tags for this Thread