belongsTo association setup. Help required.

[nataliej]

I'm trying to create a simple application that has a list of users, each user has a number of items (e.g. in a shopping basket) and each item belongs to a product. The product store contains more information like name, description, price, image etc.


I'm struggling with my belongsTo and hasMany relationships. I want to use the getProduct getter to return name and price, but at the moment I can't seem to get it to work. It's very frustrating.


I've got two stores (both containing some dummy data):

Ext.define('UPTest.store.Users', {
    extend: 'Ext.data.Store',
    alias: 'store.users',
    requires: [
        'UPTest.model.User',
        'Ext.data.proxy.Memory'
    ],
    config: {
        autoLoad: true,
        data: [
            {
                id: 1,
                name: 'Ben',
                items: [
                    {
                        productId: '20078',
                        quantity: 1
                    },
                    {
                        productId: '211',
                        quantity: 5
                    }
                ]
            },
            {
                id: 2,
                name: 'Colin',
                items: [
                    {
                        productId: '3111',
                        quantity: 10
                    }
                ]
            }
        ],
        model: 'UPTest.model.User',
        storeId: 'Users',
        proxy: {
            type: 'memory'
        }
    }
});


Ext.define('UPTest.store.Products', {
    extend: 'Ext.data.Store',
    requires: [
        'UPTest.model.Product',
        'Ext.data.proxy.Memory'
    ],
    config: {
        autoLoad: true,
        data: [
            {
                productId: '20078',
                name: 'Bike',
                price: 300
            },
            {
                productId: '211',
                name: 'Banana',
                price: 1
            },
            {
                productId: '3111',
                name: 'Clipboard',
                price: 3
            }
        ],
        model: 'UPTest.model.Product',
        storeId: 'Products',
        proxy: {
            type: 'memory'
        }
    }
});

I have three models

Ext.define('UPTest.model.User', {
    extend: 'Ext.data.Model',
    alias: 'model.user',
    requires: [
        'Ext.data.Field',
        'Ext.data.association.HasMany'
    ],
    uses: [
        'UPTest.model.Item'
    ],
    config: {
        fields: [
            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'name',
                type: 'string'
            }
        ],
        hasMany: {
            associationKey: 'items',
            model: 'UPTest.model.Item',
            name: 'items'
        }
    }
});


Ext.define('UPTest.model.Item', {
    extend: 'Ext.data.Model',
    alias: 'model.item',
    requires: [
        'Ext.data.Field',
        'Ext.data.association.BelongsTo'
    ],
    uses: [
        'UPTest.model.Product'
    ],
    config: {
        idProperty: 'productId',
        fields: [
            {
                name: 'productId',
                type: 'auto'
            },
            {
                name: 'quantity',
                type: 'int'
            }
        ],
        belongsTo: {
            associatedName: 'Product',
            associationKey: 'productId',
            model: 'UPTest.model.Product',
            foreignKey: 'productId'
        }
    }
});


Ext.define('UPTest.model.Product', {
    extend: 'Ext.data.Model',
    alias: 'model.product',
    requires: [
        'Ext.data.Field',
        'Ext.data.proxy.Memory'
    ],
    config: {
        idProperty: 'productId',
        fields: [
            {
                name: 'productId',
                type: 'auto'
            },
            {
                name: 'name',
                type: 'string'
            },
            {
                name: 'price',
                type: 'int'
            }
        ],
        proxy: {
            type: 'memory'
        }
    }
});

I set the store of the item list when the user is tapped:

var id = record.getData().id, // get the unique ID of this user record
    store = Ext.getStore('Users'),
    user = store.findRecord('id', id), // filter the store from the store
    items = user.items();


// Show form
this.getNavView().push({
    xtype: 'itemlist',
    title: 'Items',
    record: record
});


var list = this.getItemsList();
list.setStore(items);

In the item list I want to be able to see product name and price. I can get these manually by filtering the store but I'm trying to do it 'properly' using associations. No luck though. Any clues what I'm doing wrong?

var id = record.getData().productId, // get the product ID of this item
    store = Ext.getStore('Products'),
    product = store.findRecord('productId', id); // filter the store using this product ID


// this gets the product info from the product store and works. Hooray!
console.log(product.getData().name, product.getData().price);


// this uses the model association to return the product but doesn't work.
console.log(record.getData().Product);


// this doesn't work either.
console.log(record.getProduct());
console.log(record);

Screen Shot 2015-03-23 at 09.35.53.jpg




What do I need to do?

[nataliej]

Application:

Ext.define('UPTest.controller.Users', {
    extend: 'Ext.app.Controller',
    alias: 'controller.users',


    requires: [
        'Ext.MessageBox'
    ],


    config: {
        refs: {
            navView: 'users',
            list: 'users #list',
            itemsList: 'list#items'
        },


        control: {
            "users #list": {
                itemtap: 'select'
            },
            "list#items": {
                itemtap: 'onItemTap'
            }
        }
    },


    select: function(dataview, index, target, record, e, eOpts) {
        var id = record.getData().id, // get the unique ID of this user record
            store = Ext.getStore('Users'),
            user = store.findRecord('id', id), // filter the store from the store
            items = user.items();


        // Show form
        this.getNavView().push({
            xtype: 'itemlist',
            title: 'Items',
            record: record
        });


        var list = this.getItemsList();
        list.setStore(items);
    },


    onItemTap: function(dataview, index, target, record, e, eOpts) {
        // console.log(record);


        var id = record.getData().productId, // get the product ID of this item
            store = Ext.getStore('Products'),
            product = store.findRecord('productId', id); // filter the store using this product ID


        // this gets the product info from the product store
        console.log(product.getData().name, product.getData().price);




        // console.log(record);  // this is the ITEM record
        // from the ITEM record we want to get the products details
        console.log(record.getData().Product);


        console.log(record.getProduct());
        console.log(record);


    },


    launch: function() {
                // Destroy the #appLoadingIndicator element
                Ext.fly('appLoadingIndicator').destroy();
    }


});

User list

Ext.define('UPTest.view.User.Users', {
    extend: 'Ext.navigation.View',
    alias: 'widget.users',


    requires: [
        'Ext.dataview.List',
        'Ext.XTemplate',
        'Ext.navigation.Bar'
    ],


    config: {
        layout: {
            type: 'card',
            animation: 'slide'
        },
        items: [
            {
                xtype: 'list',
                title: 'Users',
                itemId: 'list',
                itemTpl: [
                    '<div>',
                    '<div><span>{id}: {name}</span></div>',
                    '</div>'
                ],
                store: 'Users'
            }
        ],
        navigationBar: {
            docked: 'top'
        }
    }


});

Item list

Ext.define('UPTest.view.Item.Items', {
    extend: 'Ext.navigation.View',
    alias: 'widget.itemlist',


    requires: [
        'Ext.dataview.List',
        'Ext.XTemplate',
        'Ext.navigation.Bar'
    ],


    config: {
        layout: {
            type: 'card',
            animation: 'slide'
        },
        items: [
            {
                xtype: 'list',
                title: 'Items',
                itemId: 'items',
                itemTpl: [
                    '<div>',
                    '<div><span>{id}</span></div>',
                    '<div><span>{productId}</span></div>',
                    '<div><span>Quantity: {quantity}</span></div>',
                    '</div>'
                ]
            }
        ],
        navigationBar: {
            docked: 'top',
            hidden: true
        }
    }


});

[nataliej]

Also, if anyone wants to download an archive of the Architect file, there's a link here: https://db.tt/Xg3pWHWU