PDA

View Full Version : Tree is not loading



Kalle1985
19 Apr 2011, 10:50 PM
Hello all,

i try to work with a simple json tree. When i start the app, the error in IE8 is shown:


Details zum Fehler auf der Webseite
Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Zeitstempel: Wed, 20 Apr 2011 06:48:45 UTC

Meldung: 'loader' ist Null oder kein Objekt
Zeile: 35886
Zeichen: 9
Code: 0


But i declared my loader in my code:




var panel = new Ext.tree.TreePanel({

title: 'reports',

cls: 'empty',

width: 200,

height: 400,

autoScroll: true,

id: 'tree-panel',

animate: true,

root: new Ext.tree.AsyncTreeNode({

text: 'Root',

draggable: false,

id:'root',

children: '[{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}]}]}]'

}),

loader: new Ext.tree.TreeLoader()
});


What is going wrong?

fay
20 Apr 2011, 12:20 AM
There's no need to use a TreeLoader if you're specifying your "children" locally. You'd use a TreeLoader to lazy load your child nodes from a URL (see dataUrl (http://dev.sencha.com/deploy/dev/docs/?class=Ext.tree.TreeLoader&member=dataUrl)). To achieve what you want:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
var jsonData =
[
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]}
]}
];

var tree = new Ext.tree.TreePanel({
renderTo: Ext.getBody(),
root: {
nodeType: 'async',
text: 'Root',
draggable: false,
id: 'root',
children: jsonData
}
});
});
</script>
</head>
<body>
</body>
</html>

Kalle1985
20 Apr 2011, 3:41 AM
Hi, thanks for reply,

i still get the following error:


Details zum Fehler auf der Webseite
Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Zeitstempel: Wed, 20 Apr 2011 11:38:49 UTC

Meldung: 'dom' ist Null oder kein Objekt
Zeile: 10978
Zeichen: 17
Code: 0

Meldung: 'loader' ist Null oder kein Objekt
Zeile: 35886
Zeichen: 9
Code: 0





Ext.onReady(function(){

var json = '[{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}]}]}]';

var panel = new Ext.tree.TreePanel({

title: 'reports',

cls: 'empty',

width: 200,

height: 400,

autoScroll: true,

id: 'tree-panel',

animate: true,

loader: new Ext.tree.TreeLoader(),

root: {

nodeType: 'async',

text: 'Root',

draggable: false,

id:'root',

children: json
}

});


new Ext.Panel({

renderTo: Ext.getBody(),

region:'west',

id: 'west-region-container',

margins:'0 0 5 5',

split:true,

width: 210,

layout:'accordion',

items: panel
});
});

Screamy
20 Apr 2011, 4:06 AM
Other than a minor bug in your json data (remove the enclosing single quotes), your code sample runs fine for me.

Kalle1985
20 Apr 2011, 4:33 AM
Omg, thats it! =D>

fay
20 Apr 2011, 4:46 AM
The issue was that with single quotes you're specifying a string; without the single quotes, an object, which is what children expects.

Kalle1985
20 Apr 2011, 6:40 AM
One question remaining:

How can i load data from remote into my tree with the intermediate step to transform the received data to a certain json or xml format?

Here is my course:
1. sending a request to server via:


var json = call('reqURL');

2. transmitting the received data to a further funtion "getJsonFormat(...)":



function call(xml) {


Ext.Ajax.request({

url : xml,
method: 'GET',

success: function ( result, request ) {

return getJsonFormat(result.responseText);

},

failure: function ( result, request) {

Ext.MessageBox.alert('Failure', result.responseText);
}

});
}

3. converting the xml to json string:



function getJsonFormat(result) {


var htmlString = "";

var services = "";

var currentName = "";

var report = "";


var services = result.split("<service>");


for(var i = 1; i < services.length; i++) {


currentName = services[i].split("<name>")[1].split("</name>")[0];

report = services[i].split("location=\"")[1].split("\"/>")[0].replace("/wsdl","");


var jsonString = '[{\"text\" : \"' + currentName + '\", \"id\" : \"' + report + '\", \"leaf\" : true' + '}]';

}

return jsonParse(jsonString);
}


I expect to get 1 tree leaf.
But nothing happens but loader is loading...and loading...and loading... 8-|

fay
20 Apr 2011, 6:48 AM
As the Ajax request is asynchronous your call() "call" will be completed before the request is. I'd write this sort of thing:




function call(xml, callbackFunc)
{
Ext.Ajax.request({
url: xml,
method: 'GET',

success: function( result, request )
{
callbackFunc(true, getJsonFormat(result.responseText));
},
failure:function( result, request)
{
callbackFunc(false);

}
});
}

//... and use it like...

call(xml, function(success, json)
{
if (success)
{
// Do what you've got to do with the json
}
else
{
// show error message...
}
});

Kalle1985
20 Apr 2011, 11:27 PM
Ok, but how can i add my json to my tree?


if (success)
{
// Do what you've got to do with the json
}

Kalle1985
21 Apr 2011, 12:06 AM
This doesn`t work:




call('./testwsil.xml', function(success, json) {

if (success) {

document.getElementById('root').appendChild(json);

} else {

Ext.MessageBox.alert('Failure', result.responseText);

}
});

Kalle1985
21 Apr 2011, 2:22 AM
This is now what i am doing:




function buildWestPanel(){


var panel = new Ext.tree.TreePanel({

title: 'reports',

cls: 'empty',

width: 200,

height: 400,

autoScroll: true,

id: 'tree-panel',

animate: true,

root: {

nodeType: 'async',

text: 'Root',

draggable: false,

id:'root',

children: call('./testwsil.xml', function(success, json) {

if (success) {

return json;

} else {

Ext.MessageBox.alert('Failure', result.responseText);

}

})

}

});


accordion = new Ext.Panel({

region:'west',

id: 'west-region-container',

margins:'0 0 5 5',

split:true,

width: 210,

layout:'accordion',

items: panel
});

return accordion;
}





function call(xml, callbackFunc) {


Ext.Ajax.request({

url: xml,
method: 'GET',

success: function( result, request ) {

return callbackFunc(true, getJsonFormat(result.responseText));

},
failure:function( result, request) {

callbackFunc(false);

}

});
}





function getJsonFormat(result) {


var htmlString = "";

var services = "";

var currentName = "";

var report = "";


var services = result.split("<service>");


for(var i = 1; i < services.length; i++) {


currentName = services[i].split("<name>")[1].split("</name>")[0];

report = services[i].split("location=\"")[1].split("\"/>")[0].replace("/wsdl","");


var jsonString = '[{\"text\" : \"' + currentName + '\", \"id\" : \"' + report + '\", \"leaf\" : true' + '}]';

}
//returns a JSON-Object

return jsonParse(jsonString);
}