extjsextjs-mvcextjs4.2

ExtJs 4.2 :: difference between "record" and "raw" in GRID


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?


Solution

  • 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