1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Answers
    1
    Vote Rating
    0
    Harshrossi is on a distinguished road

      0  

    Default Answered: Structuring/Nesting of json data to populate a tree grid

    Answered: Structuring/Nesting of json data to populate a tree grid


    I have been struggling to populate a tree grid with json data. I am reading the data from database and then loading it to the tree grid.
    The json data that I get from database is in similar format as given below:



    { "data": [{ "bike": "Yamaha", "color": "Black", "cost": 870000 },{ "bike": "Honda", "color": "Red", "cost": 675000 },{ "bike": "Honda", "color": "Blue", "cost": 690000 },{ "bike": "Suzuki", "color": "White", "cost": 800000" },{ "bike": "Harley", "color": "Yellow", "cost": 980000 },{ "bike": "Harley", "color": "Black", "cost": 880000 }]}

    In my tree panel, the first column is a tree column. I have set the below properties for tree panel
    displayField: 'bike', rootVisible: false, useArrows: true, I am able to load it to the tree grid but the thing is for each data is displayed in seperate node in the tree. I know this is because the json structure is not suitable for the tree.
    I want to convert or nest the json data in a particular format as given below:



    {"data": [{ "bike": "Yamaha", "data": [{ "bike": "Yamaha", "color": "Black", "cost": 870000 }] },{ "bike": "Honda", "data": [{ "bike": "Honda", "color": "Red", "cost": 675000 }, { "bike": "Honda", "color": "Blue", "cost": 690000 }] },{ "bike": "Suzuki", "data": [{ "bike": "Suzuki", "color": "White", "cost": 800000" }] },{ "bike": "Harley", "data": [{ "bike": "Harley", "color": "Yellow", "cost": 980000 }] },{ "bike": "Harley", "data": [{ "bike": "Harley", "color": "Black", "cost": 880000 }] }]} So that I can get the below output..

  2. Check out the data used in the tree grid example from sencha.com
    http://docs.sencha.com/extjs/4.2.1/e...une/#tree-grid

    It looks like this:
    Code:
    {
        "text": ".",
        "children": [{
                "task": "Project: Shopping",
                "duration": 13.25,
                "user": "Tommy Maintz",
                "iconCls": "task-folder",
                "expanded": true,
                "children": [{
                        "task": "Housewares",
                        "duration": 1.25,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "Kitchen supplies",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Groceries",
                                "duration": .4,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Cleaning supplies",
                                "duration": .4,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Office supplies",
                                "duration": .2,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }
                        ]
                    }, {
                        "task": "Remodeling",
                        "duration": 12,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "expanded": true,
                        "children": [{
                                "task": "Retile kitchen",
                                "duration": 6.5,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Paint bedroom",
                                "duration": 2.75,
                                "user": "Tommy Maintz",
                                "iconCls": "task-folder",
                                "children": [{
                                        "task": "Ceiling",
                                        "duration": 1.25,
                                        "user": "Tommy Maintz",
                                        "iconCls": "task",
                                        "leaf": true
                                    }, {
                                        "task": "Walls",
                                        "duration": 1.5,
                                        "user": "Tommy Maintz",
                                        "iconCls": "task",
                                        "leaf": true
                                    }
                                ]
                            }, {
                                "task": "Decorate living room",
                                "duration": 2.75,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Fix lights",
                                "duration": .75,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Reattach screen door",
                                "duration": 2,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }
                        ]
                    }
                ]
            }, {
                "task": "Project: Testing",
                "duration": 2,
                "user": "Core Team",
                "iconCls": "task-folder",
                "children": [{
                        "task": "Mac OSX",
                        "duration": 0.75,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Safari",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }, {
                        "task": "Windows",
                        "duration": 3.75,
                        "user": "Darrell Meyer",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Safari",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Internet Exploder",
                                "duration": 3,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }, {
                        "task": "Linux",
                        "duration": 0.5,
                        "user": "Aaron Conran",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Aaron Conran",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Aaron Conran",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }
                ]
            }
        ]
    }
    Notice how each parent node has a children property that is an array of child nodes underneath it. A node that doesn't have child nodes under it should also have leaf: true. This is how you'll need to structure your data so that the tree panel will know what child nodes belong to what parent nodes.

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Answers
    355
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Check out the data used in the tree grid example from sencha.com
    http://docs.sencha.com/extjs/4.2.1/e...une/#tree-grid

    It looks like this:
    Code:
    {
        "text": ".",
        "children": [{
                "task": "Project: Shopping",
                "duration": 13.25,
                "user": "Tommy Maintz",
                "iconCls": "task-folder",
                "expanded": true,
                "children": [{
                        "task": "Housewares",
                        "duration": 1.25,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "Kitchen supplies",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Groceries",
                                "duration": .4,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Cleaning supplies",
                                "duration": .4,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Office supplies",
                                "duration": .2,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }
                        ]
                    }, {
                        "task": "Remodeling",
                        "duration": 12,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "expanded": true,
                        "children": [{
                                "task": "Retile kitchen",
                                "duration": 6.5,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }, {
                                "task": "Paint bedroom",
                                "duration": 2.75,
                                "user": "Tommy Maintz",
                                "iconCls": "task-folder",
                                "children": [{
                                        "task": "Ceiling",
                                        "duration": 1.25,
                                        "user": "Tommy Maintz",
                                        "iconCls": "task",
                                        "leaf": true
                                    }, {
                                        "task": "Walls",
                                        "duration": 1.5,
                                        "user": "Tommy Maintz",
                                        "iconCls": "task",
                                        "leaf": true
                                    }
                                ]
                            }, {
                                "task": "Decorate living room",
                                "duration": 2.75,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Fix lights",
                                "duration": .75,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task",
                                "done": true
                            }, {
                                "task": "Reattach screen door",
                                "duration": 2,
                                "user": "Tommy Maintz",
                                "leaf": true,
                                "iconCls": "task"
                            }
                        ]
                    }
                ]
            }, {
                "task": "Project: Testing",
                "duration": 2,
                "user": "Core Team",
                "iconCls": "task-folder",
                "children": [{
                        "task": "Mac OSX",
                        "duration": 0.75,
                        "user": "Tommy Maintz",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Safari",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Tommy Maintz",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }, {
                        "task": "Windows",
                        "duration": 3.75,
                        "user": "Darrell Meyer",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Safari",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Internet Exploder",
                                "duration": 3,
                                "user": "Darrell Meyer",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }, {
                        "task": "Linux",
                        "duration": 0.5,
                        "user": "Aaron Conran",
                        "iconCls": "task-folder",
                        "children": [{
                                "task": "FireFox",
                                "duration": 0.25,
                                "user": "Aaron Conran",
                                "iconCls": "task",
                                "leaf": true
                            }, {
                                "task": "Chrome",
                                "duration": 0.25,
                                "user": "Aaron Conran",
                                "iconCls": "task",
                                "leaf": true
                            }
                        ]
                    }
                ]
            }
        ]
    }
    Notice how each parent node has a children property that is an array of child nodes underneath it. A node that doesn't have child nodes under it should also have leaf: true. This is how you'll need to structure your data so that the tree panel will know what child nodes belong to what parent nodes.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  4. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    9
    Answers
    1
    Vote Rating
    0
    Harshrossi is on a distinguished road

      0  

    Default


    Thanks Slemmon, I am structuring the data in my query itself so that it is in the format you mentioned above.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar