Results 1 to 10 of 10

Thread: How do I get parent and child nested json data to display in my ExtJS 4.2 grid?

  1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default How do I get parent and child nested json data to display in my ExtJS 4.2 grid?

    In the following sample program, I can't get Group Name and Group Address to display properly.

    With the "record" config commented out, the group name does not display, and the pool IP displays as the group name.

    If I uncomment the "record" config, no data at all displays in the grid.

    I thought uncommenting the 'record' config might work, but it does not, no data shows.

    So in essence, I want to display nested data, but also data from the outside level.

    So for the example data, I want 4 rows in the grid, one for each "group". Two of the groups rows will have the same name and ip data from their parent, and the other two rows will also have the same name and ip for their parent.

    Code:
    Ext.onReady(function() {
        Ext.define('com.myCompany.MyGridModel', {
            extend : 'Ext.data.Model',
            fields : [{
                name : 'poolname'
            }, {
                name : 'pooladdress',
                mapping: 'ip'
            }, {
                name : 'groupname'
            }, {
                name : 'groupaddress',
                mapping: 'ip'
            }]
        });
        var store = Ext.create('Ext.data.Store', {
            model: 'com.myCompany.MyGridModel',
            sortOnLoad: true,
            sorters: { property: 'address', direction : 'ASC' },        
            proxy: {
                type: 'ajax',
                url: 'data.json',
                reader: {
                    type: 'json',
                    root: 'objects'   //,
    //                record: 'groups'
                }
           }
        });
        store.load();
        var grid = Ext.create('Ext.grid.Panel', {
            layout: 'fit',
            store: store,
            columns: [{
                text: 'Pool Name',
                dataIndex: 'poolname'
            }, {
                text: 'Pool Address',
                dataIndex: 'pooladdress'
            }, {
                text: 'Group Name',
                dataIndex: 'groupname'
            }, {
                text: 'Group Address',
                dataIndex: 'groupaddress'        
            }],
            renderTo: Ext.getBody(),
        });
        grid.getView().refresh();
    });
    Code:
    {
      "objects": [{
          "poolname": "Pool One",
          "ip": "10.10.10.10",
          "groups": [{
              "groupname": "Pool 1 Group 1",
              "ip": "100.100.100.100"
          }, {
              "groupname": "Pool 1 Group 2",
              "ip": "150.150.150.150"      
          }]
        },
        {
          "poolname": "Pool Two",
          "ip": "20.20.20.20",
          "groups": [{
              "groupname": "Pool 2 Group 1",
              "ip": "200.200.200.200"
          }, {
              "groupname": "Pool 2 Group 2",
              "ip": "250.250.250.250"      
          }]
        }]
    }
    Code:
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="../../../ext-4.2.2.1144/resources/css/ext-all.css" />
        <script type="text/javascript" src="../../../ext-4.2.2.1144/ext-all-debug.js"></script>
        <script type="text/javascript" src="grid1.js"></script>
    </head>
    <body>
    </body>
    </html>

  2. #2
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    *********** UPDATE ********
    I tried this, but still no luck:

    Code:
    Ext.onReady(function() {
        Ext.define('com.myCompany.MyGridModel', {
            extend : 'Ext.data.Model',
            fields : [{
                name : 'poolname'
            }, {
                name : 'pooladdress',
                mapping: 'ip'
            }],
                hasMany: [{
    		        model: 'Groups',
    		        name: 'groups'
            }]
        });
        Ext.define("Groups", {
            extend: 'Ext.data.Model',
            fields: [{
                name: 'groupname'
            }, {
                name: 'groupaddress', mapping: 'ip'
            }]
        });    
        var store = Ext.create('Ext.data.Store', {
            model: 'com.myCompany.MyGridModel',
            sortOnLoad: true,
            sorters: { property: 'address', direction : 'ASC' },        
    		proxy: {
    			type: 'ajax',
    			url: 'data.json',
    			reader: {
    				type: 'json',
    				root: 'objects'   //,
    //				record: 'groups'
    			}
    	   }
        });
        store.load();
        var grid = Ext.create('Ext.grid.Panel', {
            layout: 'fit',
            store: store,
            columns: [{
                text: 'Pool Name',
                dataIndex: 'poolname'
            }, {
                text: 'Pool Address',
                dataIndex: 'pooladdress'
            }, {
                text: 'Group Name',
                dataIndex: 'groupname'
            }, {
                text: 'Group Address',
                dataIndex: 'groupaddress'        
            }],
            renderTo: Ext.getBody(),
        });
        grid.getView().refresh();
    });

  3. #3
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    Tried the info on this link but no luck:

    http://docs.sencha.com/extjs/4.1.3/#....reader.Reader

  4. #4
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    I saw a post that said Model is not good with nested data as I want to use it, and to use NodeInterface, but is it possible to use NodeInterface to get the data and display in a grid?

  5. #5
    Sencha User palakurthivishal's Avatar
    Join Date
    Jul 2013
    Location
    India
    Posts
    74
    Answers
    8

    Default

    Hello xjscrafter,
    Check out this snippet and let me know if the output meets your requirements.
    Code:
         var store = Ext.create('Ext.data.Store', {
            fields: [{name : 'poolname'},{name :  'pooladdress', mapping : 'ip' }, {name :  'groups' }],
            data :[{
                  "poolname": "Pool One",
                  "ip": "10.10.10.10",
                  "groups": [{
                      "groupname": "Pool 1 Group 1",
                      "ip": "100.100.100.100"
                  }, {
                      "groupname": "Pool 1 Group 2",
                      "ip": "150.150.150.150"      
                  }]
                },
                {
                  "poolname": "Pool Two",
                  "ip": "20.20.20.20",
                  "groups": [{
                      "groupname": "Pool 2 Group 1",
                      "ip": "200.200.200.200"
                  }, {
                      "groupname": "Pool 2 Group 2",
                      "ip": "250.250.250.250"      
                  }]
                }]
            
           
        });
        store.load();
        var grid = Ext.create('Ext.grid.Panel', {
            layout: 'fit',
            store: store,
            columns: [{
                text: 'Pool Name',
                dataIndex: 'poolname',
                flex : 1
            }, {
                text: 'Pool Address',
                dataIndex: 'pooladdress',
                flex : 1
            }, {
                text: 'Group Names',
                dataIndex: 'groups',
                flex : 3,
                renderer : function(a, b, record){
                    var groups = record.data.groups;
                    var groupNames = [];
                    Ext.each(groups, function(group){
                        groupNames.push(group.groupname); 
                    });
                    
                    return groupNames.join('&');
                    
                }
            }, {
                text: 'Group Addresses',
                dataIndex: 'groups',
                renderer : function(a, b, record){
                    var groups = record.data.groups;
                    var groupAddresses = [];
                    Ext.each(groups, function(group){
                        groupAddresses.push(group.ip); 
                    });
                    
                    return groupAddresses.join(' & ');
                    
                },
                flex : 3
            }],
            renderTo: Ext.getBody(),
        });
        grid.getView().refresh();

  6. #6
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    Its interesting, but I need one row per group, so four rows in this case. The parent info would be duplicated for each two rows. But thanks for your response.

  7. #7
    Sencha User palakurthivishal's Avatar
    Join Date
    Jul 2013
    Location
    India
    Posts
    74
    Answers
    8

    Default

    Hello xjscrafter,
    As of now, I don't have any solution to meet your exact requirement, but I can only say that I'll keep trying...

  8. #8
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    I appreciate your efforts. This is one tough nut to crack.

  9. #9
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    I thought maybe I could do this using a grouping grid, like the one in the Sencha Kitchen Sink example.

    http://docs.sencha.com/extjs/4.2.2/#.../#grouped-grid

    But in that example app, the model is simple and the data is not nested data.

    So are my hopes of solving this using grouping grid in vain?

    Can I extend the reader class to read the data? If so, how might I approach this?

  10. #10
    Sencha User palakurthivishal's Avatar
    Join Date
    Jul 2013
    Location
    India
    Posts
    74
    Answers
    8

    Default

    I would recommend you to opt for a treepanel for such kind of data...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •