Extjs Data Model Associations Problem, What am I doing wrong?

[jrds]

This is my first post and I'm new to Ext JS.
I'm trying to manipulate SimpleTasks example of sencha extjs to my needs.
I've added a new model called Comment which is "belongsTo" Task model and also Task model has "hasMany" association with Comment model. I hope the idea is clear and simple.
Here are my models:

Ext.define('SimpleTasks.model.Task', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'title' },
        { name: 'list_id', type: 'int' },
        { name: 'due', type: 'date'},
        { name: 'reminder', type: 'date' },
        { name: 'done', type: 'boolean', defaultValue: false },
        { name: 'note' }
    ],
    proxy:  {
        type  : 'ajax',
        api   : {
            create : 'php/task/create.php',
            read   : 'php/task/read.php',
            update : 'php/task/update.php',
            destroy: 'php/task/delete.php'
        },
        reader: {
            type           : 'json',
            root           : 'tasks',
            messageProperty: 'message'
        }
    },
    associations: [
        {
            type          : 'hasMany',
            model         : 'Comment',
            primaryKey    : 'id',
            foreignKey    : 'task_id',
            autoLoad      : true,
            associationKey: 'taskComments'
        }
    ]
});

Ext.define('SimpleTasks.model.Comment', {
    extend      : 'Ext.data.Model',
    fields      : [
        { name: 'id', type: 'int' },
        { name: 'task_id', type: 'int', defaultValue: null },
        { name: 'comment_text', type: 'string'},
        { name: 'comment_time', type: 'timestamp'}
    ],
    proxy       : {
        type  : 'ajax',
        api   : {
            create : 'php/comment/create.php',
            read   : 'php/comment/read.php',
            update : 'php/comment/update.php',
            destroy: 'php/comment/delete.php'
        },
        reader: {
            type           : 'json',
            root           : 'comments',
            messageProperty: 'message'
        }
    },
    associations: [
        {
            type          : 'belongsTo',
            model         : 'Task',
            primaryKey    : 'id',
            foreignKey    : 'task_id',
            associationKey: 'task'
        }
    ]
});

When i get a row from task model it doesn't return comments.
task is a variable that i

    handleEditIconClick: function (view, rowIndex, colIndex, column, e) {
        var task = view.getRecord(view.findTargetByEvent(e));
        console.log(task.taskComments());
        this.showEditBox(task);
    }

Console outputs: Uncaught TypeError: Object [object Object] has no method 'taskComments'

What am I doing wrong?

[HriBB]

http://docs.sencha.com/ext-js/4-1/#!...sMany-cfg-name

You need to pass association name to the config. Docs say:

The name of the function to create on the owner model to retrieve the child store. If not specified, the pluralized name of the child model is used.

Try it like this:

Ext.define('SimpleTasks.model.Task', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'title' },
        { name: 'list_id', type: 'int' },
        { name: 'due', type: 'date'},
        { name: 'reminder', type: 'date' },
        { name: 'done', type: 'boolean', defaultValue: false },
        { name: 'note' }
    ],
    proxy:  {
        type  : 'ajax',
        api   : {
            create : 'php/task/create.php',
            read   : 'php/task/read.php',
            update : 'php/task/update.php',
            destroy: 'php/task/delete.php'
        },
        reader: {
            type           : 'json',
            root           : 'tasks',
            messageProperty: 'message'
        }
    },
    associations: [
        {
            type          : 'hasMany',
            name          : 'taskComments', // or getComments or just comments ... doesn't really matter
            model         : 'Comment',
            primaryKey    : 'id',
            foreignKey    : 'task_id',
            autoLoad      : true,
            associationKey: 'taskComments'
        }
    ]
});

Ext.define('SimpleTasks.model.Comment', {
    extend      : 'Ext.data.Model',
    fields      : [
        { name: 'id', type: 'int' },
        { name: 'task_id', type: 'int', defaultValue: null },
        { name: 'comment_text', type: 'string'},
        { name: 'comment_time', type: 'timestamp'}
    ],
    proxy       : {
        type  : 'ajax',
        api   : {
            create : 'php/comment/create.php',
            read   : 'php/comment/read.php',
            update : 'php/comment/update.php',
            destroy: 'php/comment/delete.php'
        },
        reader: {
            type           : 'json',
            root           : 'comments',
            messageProperty: 'message'
        }
    },
    associations: [
        {
            type          : 'belongsTo',
            name          : 'task', // again you could use getTask or anything else here
            model         : 'Task',
            primaryKey    : 'id',
            foreignKey    : 'task_id',
            associationKey: 'task'
        }
    ]
});

Also try to console.log() task instead of task.taskComments(). Then search for the taskComment() function in output (be sure to check __proto__ as well ).

handleEditIconClick: function (view, rowIndex, colIndex, column, e) {    var task = view.getRecord(view.findTargetByEvent(e));
    console.log(task);
    this.showEditBox(task);
}

[jrds]

I user your solution to name the association functions but it did not work out as I expected. Maybe I am missing a simpler point?

I could not find 'taskComments' function in log (even i searched __proto__)

[jrds]

Since I'm using extjs with its mvc feature I should have used full referance syntax of the models' in my associations' config like below:

model         : 'SimpleTasks.model.Task'

My issue solved by myself