Results 1 to 3 of 3

Thread: Nested json to grid

  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    12

    Default Nested json to grid

    Hello,

    I am having issues with reading a nested json to store and then to grid. The following code does not produce anything in the grid. Please help!! Ultimately my aim to get a GroupingStore and display properties grouped by propertySetName.

    JSON returned from webservice:
    Code:
    {
       "total":"2",
       "data":[
          {
             "properties":[
                {
                   "id":"56d41d11-7626-478a-9534-ba9f978bc3e8",
                   "propertyName":"Name",
                   "stringValue":"2F.1"
                },
                {
                   "id":"94ca261e-7c4b-4c86-baa3-41b6b20f6985",
                   "propertyName":"Description",
                   "stringValue": "my name is 2F.1"
                },
                {
                   "id":"36980401-9597-4201-bcd7-cbcfb7e999e3",
                   "propertyName":"Long Name",
                   "stringValue":"2nd f.1"
                }
             ],
             "id":"f043e652-a7b6-4e88-a687-922f07b57135",
             "propertySetName":"General",
             "propertySetDisplayName":"General"
          },
          {
             "properties":[
                {
                   "id":"56d41d11-7626-478a-9534-ba93338bc3e8",
                   "propertyName":"Tag",
                   "stringValue":"2FF.1"
                },
                {
                   "id":"94ca261e-7c4b-4c86-baa3-41b4444f6985",
                   "propertyName":"Rating",
                   "stringValue":"1"
                },
                {
                   "id":"36980401-9597-4201-bcd7-cbc555599e3",
                   "propertyName":"Reference",
                   "stringValue":"abc"
                }
             ],
             "id":"f043e652-a7b6-4e88-a687-922f07777735",
             "propertySetName":"ExtendedProp",
             "propertySetDisplayName":"ExtendedProp"
          }
       ]
    }

    Here is my javascript in which I am trying to use JSON to populate store and then use it in a grid.

    //-----Record----------------------
    Code:
    var PropertyRecord = Ext.data.Record.create([{
        name: 'Name',
        mapping: 'properties.propertyName'
    },
    {
        name: 'Value',
        mapping: 'properties.stringValue'
    },
    //{properties: 'properties'}, 
    {
        id: 'id'
    },
    {
        name: 'propertySetName'
    },
    {
        name: 'propertySetDisplayName'
    }]);
    
    //-----Store----------------------
    ui.properties.createStore = function () {
        var reader = new Ext.data.JsonReader({
            root: 'data',
            totalProperty: 'total'
            //data: []
        }, PropertyRecord);
        return new Ext.data.Store({
            reader: reader,
            url: ui.properties._propertyUrl,
            autoLoad: true
        });
    /*return new Ext.data.GroupingStore({
                reader: reader,
                url : ui.properties._propertyUrl,
                autoLoad : true,
                groupField : 'propertySetName',
                //groupRenderer : function (v) {return v;}
        });*/
    
        //-----Grid----------------------
        propGrid = new Ext.grid.GridPanel({
            xtype: 'grid',
            title: 'Properties',
            id: 'prop_grid',
            loadMask: true,
            height: 235,
            store: ui.properties.createStore(),
            columns: [{
                id: 'colpropName',
                header: 'Name',
                sortable: false,
                dataIndex: 'Name'
            },
            {
                id: 'colpropValue',
                header: 'Value',
                sortable: false,
                dataIndex: 'Value'
            },
            {
                id: 'colpropID',
                header: 'ID',
                sortable: false,
                dataIndex: 'id'
            },
            {
                id: 'colpropType',
                header: 'Name',
                sortable: false,
                dataIndex: 'propertySetName'
            }],
    /*view : new Ext.grid.GroupingView({
         forceFit : true,
         emptyText: 'none', 
         enableGroupingMenu: false,
         hideGroupedColumn: true,
         startCollapsed: true,
         showGroupName: true   
        }),*/
            view: Ext.grid.GridView({
                autoFill: true,
                forceFit: true
            }),
            sm: new Ext.grid.RowSelectionModel({
                singleSelect: true
            })
        });
    Thanks,
    Karthik
    Last edited by Condor; 7 Jan 2011 at 3:35 AM. Reason: Please post using [CODE] tags!

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    A GroupingStore needs flat data, so you will need to write a root method for your JsonReader that returns flat data, e.g.
    Code:
    var reader = new Ext.data.JsonReader({
        root: function(json) {
            var root = [];
            for (var i = 0; i < json.data.length; i++) {
                var propertySet = json.data[i];
                for (var j = 0; j < propertySet.properties.length; j++) {
                    var property = propertySet.properties[j];
                    root.push(Ext.apply({
                        propertySetId: propertySet.id,
                        propertySetName: propertySet.propertySetName,
                        propertySetDisplayName: propertySet.propertySetDisplayName
                    }, property));
                }
            }
            return root;
        },
        fields: [
            'propertySetId',
            'propertySetName',
            'propertySetDisplayName',
            'id',
            'propertyName',
            'stringValue'
        ]
    });

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    12

    Default

    Thank you for the information!! I spent a lot of time on this. I changed the webservice json to send flat data to avoid the client side post processing.

Similar Threads

  1. [SOLVED]Json reader with grid won't display nested json
    By josh803316 in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 4 Mar 2009, 6:29 PM
  2. Rendering grid with nested Json data
    By ajain in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 13 Jan 2009, 2:13 PM
  3. Representing nested json data in a grid.
    By gmurphy in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 16 Sep 2008, 11:07 PM
  4. Grid: Nested objects using JSON
    By msuresh in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 3 Apr 2008, 10:34 AM
  5. Grid and json data with nested object
    By djudjublondin in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 12 Aug 2007, 2:03 AM

Tags for this Thread

Posting Permissions

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