1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Answers
    3
    Vote Rating
    5
    whirling dervish is on a distinguished road

      0  

    Default Answered: Displaying a hasMany model relationship in a Grid

    Answered: Displaying a hasMany model relationship in a Grid


    Does ExtJS have a mechanism to display a hasMany relationship in a grid?

    For instance, if I had 1 to many relationship and had a row represented the 1 side of the relationship and wanted to extend out the columns for each item in a many relationship, would that be possible, or do the columns need to be uniform in a grid?

  2. Here's what I would try, the grid wouldn't be editable this way though without a fair amount of work:
    1. Create a store of fathers before you create the grid.
    2. Use. the store.each() function to go through each father and find the maximum number of daughters while at the same time building an array of father models, flattening the hasMany daughter relationship along the way (ie father[i].daughter1, father[i].daughter2, ...).
    3. Create a new store copying all the fields (store.fields = []) from the father model and add as many daughter fields as the maximum from the above step and use the array from the above step as the data for the store.
    4. Create your grid with columns for the father properties and as many daughter columns as found in step 2. Use the store created in step 3 as the grid's store.
    Good luck!

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,074
    Answers
    673
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    After looking around, I found this:
    http://stackoverflow.com/questions/6...-extjs-4-grids

    Regards,
    Scott.

  4. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Answers
    3
    Vote Rating
    5
    whirling dervish is on a distinguished road

      0  

    Default


    Thank you Scott for your reply.

    While I might be able to use the mapping approach suggested by that thread to accomplish the hasMany grid, I don't think what the StackOverflow poster is asking is the same as what I am looking for.

    So this is what I have for my models,

    Code:
        Ext.define('Daughter', {                                                    
            extend: 'Ext.data.Model',                                               
            fields: [                                                               
                { name: 'age' },                                                    
                { name: 'name' }                                                    
            ]                                                                       
        });                                                                         
                                                                                    
        Ext.define('Father', {                                                      
            extend: 'Ext.data.Model',                                               
            fields: [                                                               
                { name: 'id' },                                                     
                { name: 'married' },                                                
                { name: 'name' },                                                   
                { name: 'sons' }                                                    
            ],                                                                      
            hasMany: {                                                              
                model: 'Daughter',                                                  
                name: 'daughters'                                                   
            }                                                                       
        });
    I think I have the data modeled correctly. Here is a sample of my JSON.
    Code:
      "fathers" : [                                                                 
        {                                                                           
          "id" : 0,                                                                 
          "married" : false,                                                        
          "name" : "Kenneth Lee",                                                   
          "sons" : null,                                                            
          "daughters" : [                                                           
            {                                                                       
              "age" : 5,                                                            
              "name" : "Sarah"                                                      
              },                                                                    
            {                                                                       
              "age" : 11,                                                           
              "name" : "Deborah"                                                    
              }                                                                     
            ]                                                                       
          },
    So far my approach has been playing with the column mapping to see if I can get it to behavior like I expect.

    This what I have for my columns. This code is WIP and does not display correctly.
    Code:
        columns = [                                                                    
            {                                                                          
                xtype: 'rownumberer'                                                   
            },                                                                         
            {                                                                          
                text: 'name',                                                          
                dataIndex: 'name'                                                      
            },                                                                         
            {                                                                          
                text: 'married',                                                       
                dataIndex: 'married'                                                   
            },                                                                         
            {                                                                          
                text: 'sons',                                                          
                dataIndex: 'sons'                                                      
            },                                                                         
            {                                                                          
                text: 'daughters',                                                     
                columns: [                                                             
                    {                                                                  
                        text: 'daughter',                                              
                        dataIndex: 'daughters[0].name'                                         
                    }                                                               
                ]                                                                   
            }                                                                       
        ];
    Keep in mind that I am new to extJS, so that Stackoverflow answer might have what I am looking for, but I am too dense to see it

  5. #4

  6. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Answers
    3
    Vote Rating
    5
    whirling dervish is on a distinguished road

      0  

    Default


    Thanks, but if I understand that thread correctly, he is creating two grids and populating the second grid with whatever was selected in the first. That is not what I am trying to do.

  7. #6
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Answers
    3
    Vote Rating
    5
    whirling dervish is on a distinguished road

      0  

    Default


    Anyone have a solution for this?

  8. #7
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Answers
    44
    Vote Rating
    42
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      0  

  9. #8
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Answers
    3
    Vote Rating
    5
    whirling dervish is on a distinguished road

      0  

    Default


    That's interesting. But that plugin displays the hasMany / belongTo on the row when it's expanded, as opposed to display the hasMany as additional columns inline on the row.

  10. #9
    Sencha User
    Join Date
    Mar 2012
    Location
    Oklahoma, USA
    Posts
    52
    Answers
    10
    Vote Rating
    8
    sdt6585 will become famous soon enough

      0  

    Default


    Here's what I would try, the grid wouldn't be editable this way though without a fair amount of work:
    1. Create a store of fathers before you create the grid.
    2. Use. the store.each() function to go through each father and find the maximum number of daughters while at the same time building an array of father models, flattening the hasMany daughter relationship along the way (ie father[i].daughter1, father[i].daughter2, ...).
    3. Create a new store copying all the fields (store.fields = []) from the father model and add as many daughter fields as the maximum from the above step and use the array from the above step as the data for the store.
    4. Create your grid with columns for the father properties and as many daughter columns as found in step 2. Use the store created in step 3 as the grid's store.
    Good luck!

  11. #10
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    88
    Answers
    3
    Vote Rating
    5
    whirling dervish is on a distinguished road

      0  

    Default


    That sounds like a workable solution. I have started implementing it, but I can't figure out how to get the initial data store to load before I create the second data store (the flattened data one).

    Prior to the load I can't call store.each, because there is nothing in the store. so I've tried using store.load(function) and given the load a function to flatten out the data, but that isn't called until after the other stores are created.