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