Results 1 to 9 of 9

Thread: Consuming Nested JSON data in a Grid

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default Consuming Nested JSON data in a Grid

    I have the following:
    JSON FILE:
    Code:
    [
        {
            "calcs": [
                {
                    "calcname": "Calc1",
                    "description": "C1"
                },
                {
                    "calcname": "CalcTest",
                    "description": "Calc Test 1"
                }
            ],
            "description": "Calc 1",
            "id": 27
        },
        {
            "calcs": [
                {
                    "calcname": "Calc1",
                    "description": "C1"
                },
                {
                    "calcname": "CalcTest1",
                    "description": "Calc Test 1"
                },
                {
                    "calcname": "CalcTest2",
                    "description": "Calc Test 2"
                },
                {
                    "calcname": "CalcTest3",
                    "description": "Calc Test 3"
                }
            ],
            "description": "All Calculations",
            "id": 7
        }
    ]

    MODEL:
    Code:
    Ext.define('Test.model.CalcCatTemplate',
    {
        extend: 'Ext.data.Model',
        idProperty: 'calcname',
        fields:
        [
            {   name: 'calcname',        type: 'string'
            },{ name: 'description',    type: 'string'
            }
        ]
    });



    STORE:
    Code:
    Ext.define('Test.store.CalcCatTemplates',
    {
        extend: 'Ext.data.Store',
        model: 'Test.model.CalcCatTemplate',
        autoLoad: true,
        
        proxy:
        {
            type: 'rest',
            url: 'data/jsonfile.json,
            reader:
            {
                type: 'json',
                root: 'calcs'
            }
        }
    });
    In my grid all the description field is the description from the root and it ignores using the 'calcs' data array.
    How can I get this to read the nested 'calcs' data.
    Last edited by mitchellsimoens; 29 Feb 2012 at 12:01 PM. Reason: added [CODE] tags

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1525
      0  

    Default

    To consume that JSON you will need to update your Model and Store:

    Code:
    Ext.define('Test.model.CalcCatTemplate', {
        extend: 'Ext.data.Model',
        idProperty: 'calcname',
        fields: [
            'calcs',
            'description',
            'id'
        ]
    });
    
    Ext.define('Test.store.CalcCatTemplates', {
        extend: 'Ext.data.Store',
        model: 'Test.model.CalcCatTemplate',
        autoLoad: true,
        
        proxy: {
            type: 'rest',
            url: 'data/jsonfile.json,
            reader: {
                type: 'json'
            }
        }
    });
    The calcs field will be an array
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Touch Premium Member
    Join Date
    Jul 2011
    Location
    Cuernavaca, Mexico
    Posts
    53
    Answers
    2
    Vote Rating
    1
      0  

    Default

    Try using a templatecolumn in your grid.

    Configure your tpl to something like this

    Code:
    tpl: '<tpl for="calcs">{calcname} {description}  <br /> </tpl> '

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default TreeGrid and JSON data

    I still couldn't get it to work with either change and I now need a Tree Grid to display the information. I still have a problem with how the control works with the JSON file. The Tree Grid appears to see the structure of the file correctly but does not display the string information from the 'description' field.

    Why doesn't the description display in the Tree Grid?
    NOTE: Using EXT JS 4.0.7 btw

    Here is my new data store:
    Code:
    Ext.define('Test.store.CalcCategories',
    {
        extend: 'Ext.data.TreeStore',
        model: 'Test.model.CalcCategory',
        autoLoad: true,
        folderSort: true,
        proxy:
        {
            type: 'rest'
            , url: 'data/calccat.json'
            , reader:
            {
                type: 'json'
            }
        }
    });
    And my new Model:
    Code:
    Ext.define('Test.model.CalcCategory',
    {
        extend: 'Ext.data.Model',
        fields:
        [
            { name: 'description',     type:'string'}
            , { name: 'id',            type:'int'}
        ]
    });
    And my new JSON file:
    Code:
    [{ 
        "description":"AIX CALC",
        "id":27,
        "expanded": true, 
        "children": 
        [{ 
            "calcname":"CalcNDC",
            "description":"NDC",
            "leaf": true 
            },{
            "calcname":"CalcIHSPrice",
            "description":"IHS Price",
            "leaf": true 
        }]
    },{
        "description":"All Calculations",
        "id":7,
        "expanded": true, 
        "children": 
        [{ 
            "calcname":"CalcNDC",
            "description":"NDC",
            "leaf": true 
            },{
            "calcname":"CalcIHSPrice",
            "description":"IHS Price",
            "leaf": true 
            },{
            "calcname":"CalcPreProcessing",
            "description":"Pre-Processing ",
            "leaf": true 
            },{
            "calcname":"CalcProRate",
            "description":"Pro Rate",
            "leaf": true 
        }]
    }]
    Last, here is my TREE VIEW which is accessed by the Viewport:
    Code:
    Ext.define('Test.view.calccategory.Tree',
     {
         extend: 'Ext.tree.Panel',
         alias: 'widget.calccategory_tree',
         store: 'CalcCategories',
         layout: Layout.FIT,
         collapsible: false,
         useArrows: true,
         rootVisible: false,
         displayField:'description',
         initComponent: function () {
    
    
             this.columns =
            [
                         {
                             xtype: 'treecolumn', 
                             text: 'Category',
                             flex: 50,
                             sortable: true,
                             dataIndex: 'description'
                         }
            ],
            this.callParent();
         }
     });
    Last edited by bkirkman; 1 Mar 2012 at 11:05 AM. Reason: added displayField to the Tree.Panel

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default

    So I thought 'displayField' in the tree panel would let me choose which field in the model was to be used for node's text so I added - displayField:'description' - right after rootVisible in the tree.panel. It had no affect.
    If I changed the json file and model so that 'description' was replaced with 'text' it then displayed as desired.

    My service though won't send back 'text' but 'description' so how do I change this so that the node text displays the 'description' field from my model instead of 'text' field?

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1525
      0  

    Default

    In your model you can use the mapping config on the field

    Code:
    { name : 'text', type : 'string', mapping : 'description' }
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  7. #7
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default

    mitchell,
    I changed my model to this:
    Code:
     
    Ext.define('Test.model.CalcCategory',
    {
        extend: 'Ext.data.Model',
       
        fields:
    	[
            //{ name: 'description', type: 'string' }, 
            { name: 'text', type: 'string', mapping: 'description' }
            , { name: 'id',         type: 'int' }
        ]
    });
    and did a search and replace in my json file for 'text' to 'description'.

    Unfortunately, it no longer displays text on the nodes. Was there somewhere else I was supposed to use mapping?

    I sure thought displayField was headed down the right path...oh well.

  8. #8
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1525
      0  

    Default

    displayField on the tree panel should change it
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  9. #9
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    22
    Vote Rating
    0
      0  

    Default

    Just tried it and no luck still no text in the nodes unless I change the json file doing search and replace 'description' with 'text' I get no display of text in my nodes. Just a reminder I am using 4.0.7 is this a defect in mapping for this release? See my code above to see how I configured displayField in case I did something incorrect.

Posting Permissions

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