0

When I was playing with associations in ExtJs 4.2 MVC, I came across a problem for which I came up with a solution.

Problem Stmt: I have a grid page popullated with Model/Store : Issue. On click of the record on the grid, one should be able to see the comments which is another Model. Each Issue can have many comments.

Sample JSON:

   {
    "data": [
        {
            "id": 555,
            "status": "OPEN",
            "createDate": "04/29/2013",
            "comments": [
                {
                    "id": 1,
                    "commentDate": "19/02/2013",
                    "description": "Test"
                },
                {
                    "id": 2,
                    "commentDate": "29/01/2013",
                    "description": "Test 2"
                }
            ]
        }
    ],
    "total": 1,
    "success": true
}

Controller

Ext.define('app.IssuesC',
                {
                    extend : 'Ext.app.Controller',
                    stores : [ 'IssuesS','CommentsS'],
                    models : [ 'IssueM', 'CommentsM'],
                    views : [ 'issue.IssueDetailV',
                            'issue.IssueGridV',
                            'issue.IssueCommentsV'],
                    refs : [ {
                        ref : 'comments',
                        selector : 'issuecomments'//xtype for issue.IssueCommentsV
                    }, {
                        ref : 'issuedetail',
                        selector : 'issuedetailv'//xtype for issue.IssueDetailV
                    }, {
                        ref : 'issuegrid',
                        selector : 'issuegrid'//xtype for issue.IssueGridV
                    } ],
                    onLaunch : function(app) {
                        this.control({
                                    'issuegrid' : {
                                        itemdblclick : this.onGridItemDblClick,
                                        select : this.onSelectIssueShowComments
                                    }
                                });
                    },

                    onGridItemDblClick : function(view, record, item, index, e) {
                        var IssueDetailV = Ext.widget('issuedetailv');
                            IssueDetailV.down('form').getForm().loadRecord(record);

                    },

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

                    }
                });

Model and association setup

Issue --> associations --> Comment

IssueM:

hasMany : {model:'CommetM',
name : 'commentsassociation'} 

CommentM: 

belongsTo : {model : 'IssueM'}

No issues any where. The views are perfectly fine. In the controller part on a single click, I am able to view the list of comments in a panel(placed below the main grid). I have used TPL property of XTemplate in the panel and it worked fine. What is this property "raw"? When I evaluate "record" in firebug it shows me "raw" "data" and many objetcs. The data part maps the name parameter and fills the values. The raw part has the same JSON structure and i have used it in retrieving the values for the panel. Is this the right way to do it?

MBK
  • 307
  • 6
  • 23
  • Raw is just the raw JSON data that was sent down from the server. The configured reader then parses that raw payload and creates your record objects. – dbrin Sep 11 '13 at 16:38
  • @dbrin , so, raw is just the raw format of the JSOn and data parameter inside the record is binded with the Model part of ExtJs. i see a list of values in data property from firebug which is a mirror of Model and some fields are popullated. What is the configured reader in my case which parses the raw payload as mentioned? I did not explicitly define any configured reader. thank you! – MBK Sep 11 '13 at 17:23
  • they are defined in store proxy: http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.reader.Reader – dbrin Sep 11 '13 at 17:41

2 Answers2

2

Raw is just the raw JSON data that was sent down from the server. The configured reader then parses that raw payload and creates your record objects. Readers are defined in store proxy: docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.reader.Reader

dbrin
  • 15,525
  • 4
  • 56
  • 83
  • Is it the right way to do. "record.raw" passing it as a parameter in handler? – MBK Sep 11 '13 at 17:50
  • for top level record, no. records will be parsed automatically unless there is an error doing so. You can attach error listeners on the reader: http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.reader.Reader-event-exception – dbrin Sep 11 '13 at 17:57
  • For nested data sets read the API doc I linked above, it discusses this very topic. – dbrin Sep 11 '13 at 17:58
  • I looked into the links you provided. they were helpful. Thank you. I went with a different approach. I have used var comment_assoc= record.getData(true) whcih brings the associations related data. Now when loading the form with getForm().loadRecord(comment_assoc) throws an error because, loadRecord() is a Basic Form method which takes Record as parameter. Any suggestions on this? By the way, the form is a widget which opens on a item double click event of the Grid. – MBK Sep 12 '13 at 20:53
  • you can use setValues on the form instead. – dbrin Sep 12 '13 at 20:54
0

"raw" gives as received from "back-end" but "record" gives the data but "transformed" through model(assuming you have some "formula" or "format" applied in "model"). Sorry for late reply!!

Bikash Sahoo
  • 95
  • 1
  • 12