extjs - 从 JSON 加载 ExtJS TreeStore

Question

我已经为此苦苦思索了大约 12 个小时，但一无所获。我真的很感激一些帮助或指导。我无法获得 visualforce 页面来使用来自 JSON 的数据呈现 sensa extjs 树面板。我正在使用 extjs 4.2.1。

我有一个 salesforce apex 类，它生成如下所示的 JSON 字符串:

{"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 }

(请注意，我删除了一些字段和记录，如果有帮助，我可以发布整个内容)。

我有一个 visualforce 页面来呈现数据，但我只能让它显示列，没有别的。下面是我的 visualforce 页面。

<!-- 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>

我真的不知道我在用 Javascript 做什么，我确定我错过了一些愚蠢的东西。我知道数据正在进入 visualforce 页面，据我所知，使用 chrome javascript 调试工具，它至少进入了我的结果变量 (res)，但没有呈现任何内容。

求助!我保证我已经完成了对 Google 的尽职调查:)。

Answer 1

A1rPun 为我指明了正确的方向。首先，我在调用树存储的加载方法并将解码的 json 结果的“记录”变量传递给它时是愚蠢的。我的结果没有这个变量，所以显然不会让我到任何地方。

相反，我最终使用了以下内容(关键是传递结果对象而不是子数组，因为它看起来像 treestore 为我做的。

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