Loading ExtJS TreeStore from JSON

Question

I've been banging my head around this for about 12 hours now and am not getting anywhere. I'd really appreciate some help or direction. I can't get a visualforce page to render a sensa extjs tree panel with data from JSON. I'm using extjs 4.2.1.

I have a salesforce apex class that generates a JSON string like the one below:

{"children":
[{"StartDate":null,
"Location":"<a href=\"null\">null</a>",
"leaf":false,
"isSelected":null,
"isActive":null,
"id":"rootnodeid",
"children":[{
                "StartDate":"2007-01-26","ShiftStartTime":"",
                "Location":"<a href=\"null\">null</a>",
                "leaf":true,"isSelected":null,
                "isSelected":null,
                "isActive":true,
                "id":"701i0000000a2OZAAY",
                "children":null}
            }]
}], 
"success": true }

(Note that I removed some fields and records, I can post the whole thing if it would be helpful).

I have a visualforce page to render the data but I can only get it to show the columns and nothing else. Below is my visualforce page.

<!-- Visualforce (using ExtJS) display/selection of Campaign hierarchy two ways by Jeff Trull (linmodemstudent@gmail.com) -->
<apex:page controller="VolunteerShiftControllerNew" tabstyle="Campaign">                                                    
<!-- get the ExtJS stuff from the static resource I uploaded -->                                                        
<apex:stylesheet value="{!$Resource.ExtJS}/extjs-4.2.1/resources/ext-theme-gray/ext-theme-gray-all.css" />                                     
<apex:includeScript value="{!$Resource.ExtJS}/extjs-4.2.1/ext-all-debug-w-comments.js"/>   



<script type="text/javascript">
    Ext.onReady(function(){

    Ext.define('CampaignModel', {
            extend: 'Ext.data.TreeStore',
            autoLoad: true,
            defaultRootProperty: "children",
            fields: [
                {name: 'name',     type: 'string'},
                {name: 'parentId',     type: 'string'},
                {name: 'StartDate',     type: 'date'},
                {name: 'isActive',     type: 'boolean'},
                {name: 'Location',     type: 'string'},
                {name: 'ShiftStartTime',     type: 'string'},
                {name: 'ShiftEndTime',     type: 'string'},
                {name: 'numVolunteersNeeded',     type: 'integer'},
                {name: 'numOpenSpots',     type: 'integer'}

            ]
    });

    var mytreestore = Ext.create('CampaignModel', {
            model: 'CampaignModel',
            proxy: {
                        type    : 'memory',
                        reader  : {
                            type : 'json',
                            root: 'children'
                        }
                   }


    });        

    var mytree = Ext.create('Ext.tree.Panel',{
        alias: 'widget.tivcpanel',
        renderTo: treediv,
        useArrows: true,
        autoScroll: true,
        animate: true,
        containerScroll: true,
        border: false,
        store: mytreestore,
        columns: [{
            xtype: 'treecolumn', //this is so we know which column will show the tree
            text: 'Name',
            flex: 2,
            sortable: true,
            dataIndex: 'name'
        },
            {text: 'Location',
            flex:1,
            dataIndex: 'Location',
            sortable: true
            },
            {text: 'Start Date',
            flex:1,
            dataIndex: 'StartDate',
            sortable: true,
            xtype:'datecolumn'
            },
            {text: 'Start Time',
            flex:1,
            dataIndex: 'ShiftStartTime',
            sortable: true
            },                    
            {text: 'End Time',
            flex:1,
            dataIndex: 'ShiftEndTime',
            sortable: true
            },                    
             {text: '# Open Spots',
            flex:1,
            dataIndex: 'numOpenSpots',
            sortable: true,
            xtype: 'numbercolumn',
            format: '0',
            renderer: function(value) {
                 if(value===-1) return '';
                 else return value;
            } 

            },                   
             {text: 'Is Active',
            flex:1,
            dataIndex: 'isActive',
            sortable: true
            //xtype: 'mytreecheckcolumn'

            }                    
         ]               
    });        

    TIVC.VolunteerShiftControllerNew.getMatchingShifts(function(result, er){ //This method is used to call our controller method
                                var res = Ext.decode(result);
                                debugger;
                                mytreestore.load(res.Records);
                                debugger;
                            }, {escape:false});          


   }); 


</script>
<apex:form id="hiddenInputForm">
</apex:form>

<apex:pageBlock title="Selecting Campaigns via TreePanel">
    <div id="treediv"/>
</apex:pageBlock>

I really don't know what I'm doing with Javascript and I'm sure I'm missing something silly. I do know that the data is getting to the visualforce page and as far as I can tell with the chrome javascript debugging tool it is at least making it into my results variable (res) but nothing gets rendered.

Please help! I promise I've done my due diligence on Google :).

Answer 1

A1rPun pointed me in the right direction. First of all I was being stupid when calling the load method of my tree store and passing it the "Records" variable of my decoded json results. My results don't have this variable so that obviously isn't going to get me anywhere.

Instead I ended up using the following (the key was to pass in the results object rather than the array of children since it looks like the treestore does that for me.

            TIVC.VolunteerShiftControllerNew.getMatchingShifts(function(result, er){ //This method is used to call our controller method
                                    var res = Ext.decode(result);
                                    mytreestore.setRootNode(res);
                                    debugger;
                                }, {escape:false});