1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Copenhagen
    Posts
    32
    Answers
    1
    Vote Rating
    0
    Igor.Szyporyn is on a distinguished road

      0  

    Default Unanswered: How to map a differntly structured model for a treestore

    Unanswered: How to map a differntly structured model for a treestore


    Hello.

    If I want to take a data model I have and add it to a treepanel via a defined model - how do I go about this?

    Say I have a data model that looks like this

    Code:
    {
        hardware: [
            {
                id: 1,
                name: 'washing machines',
                items: [
                    {
                        id: 2,
                        name: 'Kenwood model K-892',
                        specifications: [
                            {
                                name: 'weight',
                                value: 200
                                uom: 'kg'
                            },{
                                name: 'revolutions',
                                value: 2000
                                uom: 'rpm'
                            }
                        ]
                    }
                ]
            }
        ]
    }
    And I want to define a model that would take this data and create me something that a treestore would use to render me a nice treepanel

    I then assumed I should define some models to use - like so

    Code:
    Ext.define("Hardware", {
        extend: 'Ext.data.Model',
        fields: [
            {
                name: 'id',
                type: 'integer'
            },{
                name: 'name',
                type: 'string'
            }
        ],
            hasMany: {
            model: 'HardwareItem',
            name: 'children',
            associationKey: 'items'
        }
    });
    Code:
    Ext.define("HardwareItem", {
        extend: 'Ext.data.Model',
        fields: [
            {
                name: 'id',
                type: 'integer'
            },{
                name: 'name',
                type: 'string'
            }
        ],
            hasMany: {
            model: 'Specifications',
            name: 'children',
            associationKey: 'specifications'
        }
    });
    And finally invoke it via the store like so

    Code:
    {
        xtype: 'treepanel',
        store: {
            model: 'Hardware'
            data: [... data from above...],
            reader: {
                type: 'json',
                root: 'hardware'
            }
            autoLoad: true
        }
    }
    Am I doing something wrong? Or is what I want just not possible?

    Thank you in advance

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,470
    Answers
    442
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    The tree's store can accept a Javascript object for its data, but it'll need to either be formatted like you see on this example (note that the root holds the data and that the text uses a 'text' property by default and child items are listed in an array under 'children' with items not having children having a leaf: true config):

    Code:
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [{
                    text: "detention",
                    leaf: true
                }, {
                    text: "homework",
                    expanded: true,
                    children: [{
                            text: "book report",
                            leaf: true
                        }, {
                            text: "algebra",
                            leaf: true
                        }
                    ]
                }, {
                    text: "buy lottery tickets",
                    leaf: true
                }
            ]
        }
    });
    
    
    Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',
        width: 200,
        height: 150,
        store: store,
        rootVisible: false,
        renderTo: Ext.getBody()
    });
    So, you can either modify your JSON to work with that default format or you can use your own model / fields and column configs that map to the fields you're wanting to display instead of 'text'. If you don't use 'children' you'll need to modify the defaultRootProperty.
    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

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Copenhagen
    Posts
    32
    Answers
    1
    Vote Rating
    0
    Igor.Szyporyn is on a distinguished road

      0  

    Default


    Thanks for the reply.

    How do I map that they have varying names for what holds the data array.

    In my example that would be items for first level, but specifications for second.

    Would I have to build a definition to match against (that would normalize all children properties to be named children for instance) and intercept when the proxy syncs in order to code/decode my store data?

    Or can I already do that in some sneaky way by declaring a model? And how would I do that for my example - I tried as I showed, but to no avail.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,470
    Answers
    442
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    You're going to need to modify the data in this case. You can't have the tree's proxy's reader read the children as one property in one tier of the data and as something else in another tier.

    Do you have access to the data on the server side to sanitize the data before it's delivered to the client?
    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

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Location
    Copenhagen
    Posts
    32
    Answers
    1
    Vote Rating
    0
    Igor.Szyporyn is on a distinguished road

      0  

    Default


    Yes I do, but I was hoping that the model would let me map my way out of it instead

Thread Participants: 1

Tags for this Thread