Association ExtJs MVC 4.2

Question

ExtJS 4.2 MVC: I have two models ServiceM and CommentsM. ServiceM has association(hasmany) with CommentsM. I DIDNOT forget to add the requires section ServiceM. Proxy is an ajax type defined in the model itself. I also created stores for each. Coming to the view, I have a grid for viewing all the services which are derived on loading the application. itemdblclick event is used to provide a detailed view about the service which is a window extending a form. The form is popullated by the below code:

   var ServiceDetailV = Ext.widget('alias name of the service detail view');
   ServiceDetailV.down('form').getForm().loadRecord(record);

I have two questions here.

1. When using developer tools in google chrome, in the above code I place debugger; at the end. I have highlighted the record, right clicked and evaluated that part. I see the data part and raw part. what is this raw part. It has all the data which the server is giving me(payload), even the nested comments section which is associated with the Service data.
2. I am able to popullate the fields in the form, but not the list of comments. the list of comments goes into a panel present in the form. How can I popullate the comments section.

JSON data:

{
"data": [
    {
        "id": 1,
        "x": "some text",
        "q": "some text",
        "a": "some text",
        "r":"some text",
        "comments": [
            {
                "id": 87,
                "commentDate": "date",
                "description": "some text"
            },
            {
                "id": 86,
                "commentDate": "date",
                "description": "some text"
            }
        ]
    }  "total": 1,
"success": true}

Now, how can i access the comments field and poppulate the form with this data?

Please shed some knowledge on Associations ExtJs MVC.

Cheers!

Answer 1

Well, I took a step and got the solution for this. the raw parameter actually has the raw JSON payload. In the controller part I have handled it via a select event.

onSelectIssueShowComments : function(selection,record, index, eOpts) {
                        this.getComments().setRecord(record.raw);
                    }

I the view part

tpl : [ '<p>Previous Comments: ', '<tpl for="comments">',
            '<p>{#}. {description}       {commentDate}</p>', '</tpl></p>' ],

    setRecord : function(record) {//this record here is record.raw
        this.record = record;

        if (record) {
            this.update(record);
        } else {
            this.update(' ');

        }
    }

So it displays the array of comments in a Panel.