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指出我的方向正确。首先，在调用我的树存储的load方法并将其传递给＆＃34;记录＆＃34;时，我是愚蠢的。我解码的json结果的变量。我的结果没有这个变量，所以显然不会让我到任何地方。

相反，我最终使用了以下内容（关键是传入结果对象而不是子数组，因为看起来树库为我做了这个。

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

从JSON加载ExtJS TreeStore

1 个答案: