+1 vote
1 view
in Salesforce by (11.3k points)

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 sense 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 ([email protected]) -->

<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 :).

1 Answer

0 votes
by (28.6k points)

So, to solve this issue, first of all, when you're calling the load method of tree store and passing it the "Records" variable of decoded JSON results your results won't have this variable so that obviously isn't going to get you anywhere.

Instead of that try using the following (the key was to pass in the results object rather than the array of children since it looks like the tree store does that for you.

  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}); 

...