2014-05-01 68 views
3

我一直在嘲笑我的頭大約12個小時,現在沒有任何地方。我真的很感謝一些幫助或方向。我無法獲得一個Visualforce頁面,使用JSON中的數據呈現sensa extjs樹面板。我使用的是extjs 4.2.1。從JSON中加載ExtJS TreeStore

我有一個生成類似下面的一個JSON字符串Salesforce的頂點類:

{"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 ([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> 

我真的不知道我用javascript做的,我敢肯定,我失去了一些愚蠢的。我知道數據正在進入visualforce頁面,並且據我所知,使用chrome javascript調試工具至少可以將它放到我的結果變量(res)中,但是沒有任何東西會被渲染。

請幫忙!我保證我已經在谷歌上做了我的盡職調查:)。

+1

你試過'mytreestore。 setRootNode(res.Records);'而不是'mytreestore.load(res.Records);'? – A1rPun

+0

我現在已經做了,但它沒有改變任何東西。我很確定數據被加載到樹中,但事情並沒有發生在正確的順序來實際更新div? –

回答

3

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

我很高興你解決了你的問題! – A1rPun