Creating hasMany associations in Sencha Touch 2

Question

I'm trying to create a simple model association in Sencha Touch 2.3.1.

Basically I want to have a store of coupons, arranged in categories. So every category hasMany coupons.

My data is currently hardcoded in the store declarations (no proxy or server).

Category model declaration :

Ext.define('Category', {
extend: 'Ext.data.Model',

config: {
    idProperty: 'id',
    fields: [
        { name: 'id'},
        { name: 'name' },
        { name: 'itemType'}
    ],
    hasMany: [
        {
            associatedModel: 'Coupon',
            name: 'Coupons',
            foreignKey: 'category_id'
        }
    ]
}});

Coupon model :

Ext.define('Coupon', {
extend: 'Ext.data.Model',
config: {

    fields: [
        { name: 'couponId'},
        { name: 'title'},
        { name: 'description'},
        { name: 'category_id'},
    ],
    belongsTo: [
        {
            model: 'Category',
            name: 'Category',
            associationKey: 'category_id'
        }
    ]
}});

Category store and data:

Ext.define('CategoryStore', {
extend: 'Ext.data.Store',
config: {
    autoLoad: true,

    data: [
        {
            id: 1,
            name: "cat1"
        },
        {
            id: 2,
            name: "cat2"
        }
    ],
    model: 'Category',
    storeId: 'CategoryStore'
}});

Coupon Store :

Ext.define('CouponStore', {

extend: 'Ext.data.Store',
config: {
    autoLoad: true,

    data: [
        {
            id: '1',
            title: 'coupon1',
            description : 'some desc',
            category_id:1
        },
        {
            id: '2',
            title: 'coupon2',
            description : 'desc2',
            category_id:2
        }
    ],
    model: 'Coupon',
    storeId: 'CouponStore'
}

});

And finally, the code in the launch function in app.js :

Ext.application({

name: 'hasmany',

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

    var categoryStore = Ext.create('CategoryStore');

    var cat2 = categoryStore.findRecord('name','cat2');

    console.log(cat2.getData()); //This works fine

    console.log(cat2.Coupons().getData()); //This returns an empty array
}

});

The Results : The hasMany association method cat2.Coupons() returns an empty array :

Chrome console :

> Object {id: 2, name: "cat2", itemType: undefined} app.js:100
Class {all: Array[0], items: Array[0], keys: Array[0], indices: Object, map: Object…}

Any help would be appreciated, thanks !

* EDIT : I managed to achieve the desired results using a workaround:

var couponStore = Ext.create('CouponStore');
couponStore.filter('category_id',2);

So that's good enough for me at the moment, however I would be very interested to know why my previous code didn't work.

horcle_buzz horcle_buzz · Accepted Answer · 2014-05-08T17:32:17

I am running into the same issue. Basically, you need to create a blank association for any hasMany associations, since your cat2.Coupons() returns the hasMany store but if there are no associated records, it will just simply return a store with .recordCount() = 0. Thus, you need add a blank association. I have it now partially working. What I did was to add the following chunk of code in when I parse the incoming data (I changed variable names to match your names):

    var recArray;
    var couponRecs = category.Coupons();
    var couponModel = Ext.ModelManager.getModel('YourAppName.model.Coupon');

    if (couponRecs.getCount() === 0){
        recArray = couponnRecs.add(couponModel);
        recArray[0].set({attributes here});
    }

ADDITION:

I got this working, but there is a problem in that the hasMany associations do not persist. See https://stackguides.com/questions/23582602/storing-hasmany-associations-in-sencha-touch-2-3-1

Creating hasMany associations in Sencha Touch 2

2 Answers