Results 1 to 3 of 3

Thread: belongsTo association setup. Help required.

  1. #1

    Question belongsTo association setup. Help required.

    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):


    Code:
    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


    Code:
    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:


    Code:
    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?


    Code:
    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?

  2. #2

    Default

    Application:

    Code:
    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
    Code:
    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
    Code:
    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
            }
        }
    
    
    });

  3. #3

    Default Architect file

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •