1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    134
    Answers
    6
    Vote Rating
    5
    JRS is on a distinguished road

      0  

    Default Answered: List and store with Associated data

    Answered: List and store with Associated data


    Hello,
    I've looked through many posts and was unable to solve my problem. I am hoping someone might have come across this issue and might be able to point me in the right direction. I am trying to populate the list with the associated data from the store - rather than the first level.

    I am loading a store from a JSON file (sencha sample). Users - has Many Orders and Order items.
    I have list that can populate the users - without any problems.
    However, I would like to populate the list with Orders (the second level). I tried using TPL to access the orders but I am only getting blanks.

    Thanks in advance


    Here are the files I'm using: Model, Store, List and JSON
    User.js model
    Code:
    Ext.define('MyApp.model.User', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name: 'id', type: 'int'},
                {name: 'name', type: 'string'},            
            ],
            hasMany: {
                model: 'MyApp.model.Order',
                name: 'orders'
            },
            proxy: {
                type: 'ajax',
                url : 'userData.json',
            }        
        }   // config
    });
    User Store
    Code:
    Ext.define('MyApp.store.Users', {
        extend: 'Ext.data.Store',
        alias: 'store.userstore',
        config: {
            storeId: 'mystore',
            model: 'MyApp.model.User',
            autoLoad: true,
            listeners:{
                load: function(item, record){
                    console.log("User Store");
                    console.log(record);
                } //load method
            }   // listener
        } // config
    });
    List1Page.js
    Code:
    Ext.define ('MyApp.view.List1page', {
        extend: 'Ext.dataview.List',
        xtype: 'list1page',
        requires: ['MyApp.store.Users'],
        config:{
            
            allowDelsect: false,
            itemTpl: '<tpl for"orders">{id}</tpl>',
            store: {
                type: 'userstore'
            }
        }
    });
    Code:
    //userData.json
    [
        {
            "id": 1,
            "name": "Ed Spencer",
            "orders": [
                {
                    "id": 100,
                    "status": "shipped",
                    "orderItems": [
                        {
                            "id": 453,
                            "price": 19.50,
                            "quantity": 3,
                            "name": "Some Product"
                        }
                    ]
                },
                {
                    "id": 101,
                    "status": "pending",
                    "orderItems": [
                        {
                            "id": 543,
                            "price": 54.99,
                            "quantity": 1,
                            "name": "Some Product"
                        },
                        {
                            "id": 544,
                            "price": 20,
                            "quantity": 2,
                            "name": "Another Product"
                        }
                    ]
                }
            ]
        },
        {
            "id": 2,
            "name": "Jamie Avins",
            "orders": [
                {
                    "id": 200,
                    "status": "shipped",
                    "orderItems": [
                        {
                            "id": 456,
                            "price": 19.50,
                            "quantity": 2,
                            "name": "A Product"
                        }
                    ]
                }
            ]
        },
        {
            "id": 3,
            "name": "Aaron Conran",
            "orders": [
                {
                    "id": 300,
                    "status": "back order",
                    "orderItems": [
                        {
                            "id": 743,
                            "price": 19.50,
                            "quantity": 2,
                            "name": "The Product"
                        }
                    ]
                }
            ]
        },
        {
            "id": 4,
            "name": "Robert Dougan",
            "orders": [
                {
                    "id": 400,
                    "status": "shipped",
                    "orderItems": [
                        {
                            "id": 666,
                            "price": 19.50,
                            "quantity": 1,
                            "name": "No Product"
                        }
                    ]
                }
            ]
        }
    ]
    Here are the other models
    Code:
    Ext.define('MyApp.model.Order', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name: 'id', type: 'int'},
                {name: 'status', type: 'string'},            
            ],
            hasMany: {
                model: 'MyApp.model.OrderItems',
                name: 'orderItems'
            }
        }   // config
    });
    Code:
    Ext.define('MyApp.model.OrderItem', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name: 'id', type: 'int'},
                {name: 'price', type: 'float'},            
                {name: 'quantity', type: 'int'},            
                {name: 'name', type: 'string'},            
            ]
        }   // config
    });
    Last edited by JRS; 7 Dec 2012 at 10:23 AM. Reason: Added missing model definitions

  2. You have an error in your itemTpl (see missing in red):

    Code:
    itemTpl : '<tpl for="orders">{id}</tpl>',
    Once you get the equal, it will work.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Answers
    3467
    Vote Rating
    835
    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


    You have an error in your itemTpl (see missing in red):

    Code:
    itemTpl : '<tpl for="orders">{id}</tpl>',
    Once you get the equal, it will work.
    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.

  4. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    134
    Answers
    6
    Vote Rating
    5
    JRS is on a distinguished road

      0  

    Default Thank you very much - it does work!

    Thank you very much - it does work!


    Mitchell.
    Thank you very much.

Thread Participants: 1

Tags for this Thread