PDA

View Full Version : How can I get my tree data loaded in my tree panel?



xjscrafter
31 Jan 2014, 12:55 PM
I'm getting a response, but the tree data is not loading into the tree.

Here is the responseText of the response (maybe this is the issue):


""{root: [{text: \"Tree Root\",expanded: true,children: [{text: \"Fruits\",children: [{ leaf:true, text: \"apple\" },{ leaf:true, text: \"orange\" }]},{text: \"Vegetables\",expanded: false,children: [{ leaf:true, text: \"carrot\" },{ leaf:true, text: \"beet\" }]},{text: \"Dairy\",children: [{ leaf:true, text: \"milk\" },{ leaf:true, text: \"cheese\" }]}]}]}""


If I change so my responseText is this, still doesn't work:


"{root: [{text: "Tree Root",expanded: true,children: [{text: "Fruits",children: [{ leaf:true, text: "apple" },{ leaf:true, text: "orange" }]},{text: "Vegetables",expanded: false,children: [{ leaf:true, text: "carrot" },{ leaf:true, text: "beet" }]},{text: "Dairy",children: [{ leaf:true, text: "milk" },{ leaf:true, text: "cheese" }]}]}]}"


function onGetData(data) {
alert('onGetData');
alert(data);
};
Ext.onReady(function() {
Ext.create('Ext.tree.Panel', {
title: 'Tree Refresh Example',
width: 300,
height: 350,
listeners: {
afterRender: function() {
this.store.getData(onGetData, this);
}
},
tbar: ['->', {
xtype: 'button',
text: 'Add Banana',
value: 1,
margin: '0 30 0 0',
listeners: {
click: function(comp) {
sendData(comp.value);
}
}
}, {
xtype: 'button',
text: 'Add Cabbage',
value: 2,
margin: '0 30 0 0',
listeners: {
click: function(comp) {
sendData(comp.value);
}
}
}, {
xtype: 'button',
text: 'Add Yogurt',
value: 3,
listeners: {
click: function(comp) {
sendData(comp.value);
}
}
}, '->'],
renderTo: 'content',
store: new SampleTreeData()
});
});


Ext.define('SampleTreeData', {
extend: 'Ext.data.TreeStore',
proxy: {
type: 'ajax',
url : '',
reader: {
type: 'json',
root: 'root'
}
},
getData: function(callBack, scope) {
alert('getData');
var store = this;
store.proxy.url = 'data.php?mode=getData';
scope.collapseAll();
store.load({
scope : scope,
callback : function(records, operation, success) {
if (Ext.isFunction(callBack)) {
callBack(store, scope, records, success);
}
}
});
}
});


<?php
$data = 'root: {' .
'text: "Tree Root",' .
'expanded: true,' .
'children: [' .
'{' .
'text: "Fruits",' .
'children: [' .
'{ leaf:true, text: "apple" },' .
'{ leaf:true, text: "orange" }' .
']' .
'},' .
'{' .
'text: "Vegetables",' .
'expanded: false,' .
'children: [' .
'{ leaf:true, text: "carrot" },' .
'{ leaf:true, text: "beet" }' .
']' .
'},' .
'{' .
'text: "Dairy",' .
'children: [' .
'{ leaf:true, text: "milk" },' .
'{ leaf:true, text: "cheese" }' .
']' .
'}' .
']' .
'}';
$logref = fopen('data.log', 'w');
fwrite($logref, "Entered script.\n");


if(isset($_POST['data'])){
fwrite($logref, "sendData\n");
return 'sendDataSuccess';
}else {
fwrite($logref, "getData\n");
echo json_encode(utf8_encode($data));
}
fclose($logref);
?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../../ext-4.2.2.1144/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../../ext-4.2.2.1144/ext-all-debug.js"></script>
<script type="text/javascript" src="refresh1.js"></script>
<script type="text/javascript" src="SampleTreeData.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: #89E5BD;">
<div id="content" style="margin: auto; width: 500px; height: 500px;"/>
</body>

xjscrafter
31 Jan 2014, 2:32 PM
SOLVED

Got it working by changing my PHP, and by setting rootVisible to false on the TreePanel.

I also changed the tree store a bit.


Ext.define('SampleTreeData', {
extend: 'Ext.data.TreeStore',
autoLoad: false,
autoSync: false,
proxy: {
type: 'ajax',
url : '',
reader: {
type: 'json',
root: ''
}
},
root: {
expanded: true
},
getData: function(callBack, scope) {
var store = this;
store.proxy.url = 'data.php?mode=getData';
store.load({
scope : scope,
callback : function(records, operation, success) {
if (Ext.isFunction(callBack)) {
callBack(store, scope, records, success);
}
}
});
}
});



<?php
$data = '[{' .
'text: "Tree Root",' .
'expanded: true,' .
'children: [' .
'{' .
'text: "Fruits",' .
'children: [' .
'{ leaf:true, text: "apple" },' .
'{ leaf:true, text: "orange" }' .
']' .
'},' .
'{' .
'text: "Vegetables",' .
'expanded: false,' .
'children: [' .
'{ leaf:true, text: "carrot" },' .
'{ leaf:true, text: "beet" }' .
']' .
'},' .
'{' .
'text: "Dairy",' .
'children: [' .
'{ leaf:true, text: "milk" },' .
'{ leaf:true, text: "cheese" }' .
']' .
'}' .
']' .
'}]';
$logref = fopen('data.log', 'w');
fwrite($logref, "Entered script.\n");


if(isset($_POST['data'])){
fwrite($logref, "sendData\n");
return 'sendDataSuccess';
}else {
fwrite($logref, "getData\n");
echo $data;
}
fclose($logref);
?>