1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    15
    Vote Rating
    0
    pbernardini is on a distinguished road

      0  

    Default treeStore with recursive data

    treeStore with recursive data


    Hi,
    I have a json like this:

    Code:
    { "Categories": [ { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 7, "InternalName": "items", "Name": "" }, "children": [ { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 2, "InternalName": "CASE Corporate", "Name": "Corporate" }, "children": [ { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 10, "InternalName": "test1", "Name": "test1" }, "children": [ { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 12, "InternalName": "subsub", "Name": "subsub1" }, "children": [ ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 16, "InternalName": "nvcxhgfx", "Name": "nvcxhgfx" }, "children": [ ] } ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 11, "InternalName": "test12a", "Name": "test12en" }, "children": [ ] } ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 3, "InternalName": "Job Site", "Name": "Job report" }, "children": [ { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 17, "InternalName": "nvcxhgfxggg", "Name": "nvcxhgfx" }, "children": [ ] } ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 4, "InternalName": "CASE Dealers", "Name": "Dealers" }, "children": [ ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 5, "InternalName": "Events", "Name": "Events" }, "children": [ ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 6, "InternalName": "Show", "Name": "Shows" }, "children": [ ] } ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 8, "InternalName": "management", "Name": "" }, "children": [ ] }, { "item": { "Description": "", "Media": null, "ItemCount": 0, "Id": 9, "InternalName": "multimedia", "Name": "" }, "children": [ ] } ] }

    where I have a nested structure of objects compose of item and children, each children is a collection of item and children as well.

    I set up the store like this

    Code:
    
    
    Code:
    Ext.define('MyApp.store.Categories', {
        extend: 'Ext.data.TreeStore',
        alias: 'store.categoriesStore',
    
    
        requires: [
            'MyApp.model.CategoryTree'
        ],
    
    
        config: {
            model: 'MyApp.model.CategoryTree',
            storeId: 'categoriesStore',
            nodeParam: 'children',
            proxy: {
                type: 'ajax',
                url: 'http://domain/Presskit/front/api/category/GetAllCategories',
                reader: {
                    type: 'json',
                    rootProperty: 'Categories'
                }
            }
        }
    });


    and the models like this:

    Code:
    
    
    Code:
    Ext.define('MyApp.model.CategoryTree', {
        extend: 'Ext.data.Model',
    
    
        uses: [
            'MyApp.model.Category'
        ],
    
    
        config: {
            hasMany: {
                associationKey: 'children',
                model: 'MyApp.model.CategoryTree',
                autoLoad: true,
                name: 'children'
            },
            hasOne: {
                associationKey: 'item',
                model: 'MyApp.model.Category'
            }
        }
    });
    
    
    Ext.define('MyApp.model.Category', {
        extend: 'Ext.data.Model',
    
    
        uses: [
            'MyApp.model.CategoryTree'
        ],
    
    
        config: {
            fields: [
                {
                    name: 'Name'
                },
                {
                    name: 'InternalName'
                },
                {
                    name: 'Id'
                },
                {
                    name: 'Media'
                },
                {
                    name: 'ItemCount'
                },
                {
                    name: 'Description'
                }
            ],
            belongsTo: {
                model: 'MyApp.model.CategoryTree',
                primaryKey: 'Id'
            }
        }
    });


    But it doesn't seam to work properly.
    What is the correct implementation for the model?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you change your JSON to be like:

    Code:
    [
        {
            "Description"  : "",
            "Media"        : null,
            "ItemCount"    : 0,
            "Id"           : 7,
            "InternalName" : "items",
            "Name"         : "",
            "children" : [
                {
                    "Description"  : "",
                    "Media"        : null,
                    "ItemCount"    : 0,
                    "Id"           : 2,
                    "InternalName" : "CASE Corporate",
                    "Name"         : "Corporate",
                    "children" : [
                        {
                            "Description"  : "",
                            "Media"        : null,
                            "ItemCount"    : 0,
                            "Id"           : 10,
                            "InternalName" : "test1",
                            "Name"         : "test1",
                            "children" : [
                                {
                                    "Description"  : "",
                                    "Media"        : null,
                                    "ItemCount"    : 0,
                                    "Id"           : 12,
                                    "InternalName" : "subsub",
                                    "Name"         : "subsub1",
                                    "children" : [
    
                                    ]
                                },
                                {
                                    "Description"  : "",
                                    "Media"        : null,
                                    "ItemCount"    : 0,
                                    "Id"           : 16,
                                    "InternalName" : "nvcxhgfx",
                                    "Name"         : "nvcxhgfx",
                                    "children" : [
    
                                    ]
                                }
                            ]
                        },
                        {
                            "Description"  : "",
                            "Media"        : null,
                            "ItemCount"    : 0,
                            "Id"           : 11,
                            "InternalName" : "test12a",
                            "Name"         : "test12en",
                            "children" : [
    
                            ]
                        }
                    ]
                },
                {
                    "Description"  : "",
                    "Media"        : null,
                    "ItemCount"    : 0,
                    "Id"           : 3,
                    "InternalName" : "Job Site",
                    "Name"         : "Job report",
                    "children" : [
                        {
                            "Description"  : "",
                            "Media"        : null,
                            "ItemCount"    : 0,
                            "Id"           : 17,
                            "InternalName" : "nvcxhgfxggg",
                            "Name"         : "nvcxhgfx",
                            "children" : [
    
                            ]
                        }
                    ]
                },
                {
                    "Description"  : "",
                    "Media"        : null,
                    "ItemCount"    : 0,
                    "Id"           : 4,
                    "InternalName" : "CASE Dealers",
                    "Name"         : "Dealers",
                    "children" : [
    
                    ]
                },
                {
                    "Description"  : "",
                    "Media"        : null,
                    "ItemCount"    : 0,
                    "Id"           : 5,
                    "InternalName" : "Events",
                    "Name"         : "Events",
                    "children" : [
    
                    ]
                },
                {
                    "Description"  : "",
                    "Media"        : null,
                    "ItemCount"    : 0,
                    "Id"           : 6,
                    "InternalName" : "Show",
                    "Name"         : "Shows",
                    "children" : [
    
                    ]
                }
            ]
        },
        {
            "Description"  : "",
            "Media"        : null,
            "ItemCount"    : 0,
            "Id"           : 8,
            "InternalName" : "management",
            "Name"         : "",
            "children" : [
    
            ]
        },
        {
            "Description"  : "",
            "Media"        : null,
            "ItemCount"    : 0,
            "Id"           : 9,
            "InternalName" : "multimedia",
            "Name"         : "",
            "children" : [
    
            ]
        }
    ]
    Then model and store:

    Code:
    Ext.define('MyApp.model.Category', {
        extend : 'Ext.data.Model',
    
        config : {
            fields    : [
                {
                    name : 'Name'
                },
                {
                    name : 'InternalName'
                },
                {
                    name : 'Id'
                },
                {
                    name : 'Media'
                },
                {
                    name : 'ItemCount'
                },
                {
                    name : 'Description'
                }
            ]
        }
    });
    
    Ext.define('MyApp.store.Categories', {
        extend : 'Ext.data.TreeStore',
        alias  : 'store.categoriesStore',
    
        config : {
            model     : 'MyApp.model.Category',
            storeId   : 'categoriesStore',
            nodeParam : 'children',
            proxy     : {
                type   : 'ajax',
                url    : 'data/json.json',
                reader : {
                    type : 'json'
                }
            }
        }
    });
    And the test NestedList:

    Code:
    Ext.Viewport.add({
        xtype        : 'nestedlist',
        displayField : 'Name',
        store        : new MyApp.store.Categories()
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    15
    Vote Rating
    0
    pbernardini is on a distinguished road

      0  

    Default


    Thanks for your reply.
    I saw that all nested list sample use your kind of data structure.
    Since the json comes from a service that I can't modify there is no other way to do it?

  4. #4
    Sencha User bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    You could create your own facade in your backend code which pulls data from this service and modifies it to your liking. What about that?

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    15
    Vote Rating
    0
    pbernardini is on a distinguished road

      0  

    Default


    Ok, I was able to make it work.
    Now I have one more question:
    is it possible to assign a node (in my case "children") to a new store for a different nested list, I tried this but didn't work:

    Code:
    store.load({
        params:{
            Token: token,
            Language:languageId,
            CategoryName:"items"
        },
        callback: function(records, operation, success) {
            var response = records && records[0];
            if (response)
            {
                Ext.Array.each(records, function(name, index, countriesItSelf) 
                {
                    var internalName = name.data.InternalName;
                    //console.log(internalName);
                    switch (internalName) {
                        case "items":  
                        var ItemsCategory = Ext.getStore('ItemsCategory');
                        var children = name.data;
                        ItemsCategory.root = children;
                        //var list = Ext.getCmp('categoryList');
                        //list.store = ItemsCategory;
                        break;
                        case "management":  
                        //todo
                        break;
                        case "multimedia":  
                        //todo
                        break;
                    }
                });
    
    
                this.getFiltrableProperties();
            }
        },
        scope: this
    });

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    15
    Vote Rating
    0
    pbernardini is on a distinguished road

      0  

    Default


    ok, I was able to get some result but not quite what I was expecting

    I'm calling a services that return e treestore structure. When it loads I want to set one node as a source of a nested list:

    Code:
    var store = Ext.getStore('AllCategories');
    var languageId = selectedLanguage.data.Id;
    store.load({
        params:{
            Token: token,
            Language:languageId
        },
        callback: function(records, operation, success) {
            var response = records && records[0];
            if (response)
            {
                Ext.Array.each(records, function(name, index, countriesItSelf) 
                {
                    var internalName = name.data.InternalName;
                    //console.log(internalName);
                    switch (internalName) {
                        case "items":  
                        var ItemsCategory = Ext.getStore('ItemsCategory');
                        var children = name.data;
                        ItemsCategory.setRoot(children);
                        //var list = Ext.getCmp('categoryList');
                        //list.store = ItemsCategory;
                        break;
                        case "management":  
                        //
                        break;
                        case "multimedia":  
                        //
                        break;
                    }
                });
    
    
                this.getFiltrableProperties();
            }
        },
        scope: this
    });
    This is the nestedList store:

    Code:
    Ext.define('MyApp.store.ItemsCategory', {
        extend: 'Ext.data.TreeStore',
        alias: 'store.ItemsCategory',
    
    
        requires: [
            'MyApp.model.Category'
        ],
    
    
        config: {
            model: 'MyApp.model.Category',
            storeId: 'ItemsCategory',
            rootVisible: false,
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'children'
                }
            }
        }
    });
    it works, but the list is presented with a back button that takes you to the root of the original data, basically to Ext.getStore('AllCategories');

  7. #7
    Sencha User
    Join Date
    Oct 2012
    Location
    Belo Horizonte, Brazil
    Posts
    5
    Vote Rating
    0
    leandroafonso is on a distinguished road

      0  

    Default


    I made this example and really works. Thank you, but my application is MVC, in defining store, model and TreeStore and load the view with
    Code:
    ...
    var myView = {xtype: 'myview'};
    Ext.Viewport.add (MyView);
    ...
    the view is displayed with all items and is navigable but the items do not carry the value in the Name property of the object.


    When I load the view same as in the example, using same JSON file same model and same store carries the names and values contained in Name are loaded into TreeView:
    Code:
    Ext.Viewport.add ({
     xtype 'nestedlist'
     displayField: 'Name',
     store: new MyApp.store.Categories ()
    });
    can anyone help me?