PDA

View Full Version : Forum.html Example: Having trouble coding the TREE JSON response [SOLVED!]



JoyfulBobHome
3 Dec 2009, 11:22 AM
I'd learning the Forum.html example and would like to implement it, however, I'm having trouble coding my tree JSON response. I've coded it like my other trees but nothing loads, nor do I recieve any error.

Does this Forum example use a different structure for the TREE JSON? Does it matter that it uses a ScriptTagProxy while I usually use a HttpProxy in my other tree pages?

Thanks in advance!

CrazyEnigma
3 Dec 2009, 2:52 PM
The TreeLoader sends the id in the request as "node="

Your response should be a JSON response:


[{"id":"<arbitrary id>","cls":"","qtip":"","text":"Child Node 1","leaf":true/false}
,{"id":"<arbitrary id>","cls":"","qtip":"","text":"Child Node 2","leaf":true/false}
//
]


Where:
id: will be the new node passed in. The id doesn't have to be related to the parent node, like in the local instance.
text: display
cls: the icon to display
qtip: your quick tip
leaf: whether or not the node will have children.



loader: new Ext.tree.TreeLoader({
dataUrl:<your url>,
requestMethod: 'POST',
baseParams:{// any params you want to pass in}
}),

JoyfulBobHome
7 Dec 2009, 10:56 AM
Thanks for your reply. I tried that with no success. I've configured trees before but something must be different in this example.

If I could see the JSON response I could figure it out. I tried replacing ScriptTagProxy with HttpProxy and I get this JS error:

"reader.meta is undefined"



Forum.TreeLoader = function(){
Forum.TreeLoader.superclass.constructor.call(this);
this.proxy = new Ext.data.HttpProxy({
url : this.dataUrl,
requestMethod: 'POST',
baseParams: {}
});
};
Ext.extend(Forum.TreeLoader, Ext.tree.TreeLoader, {
// Initial loading of tree
//dataUrl: 'http://extjs.com/forum/forums-remote.php',
dataUrl: 'UXEKB?submit=EKBLOADTREE',
requestMethod: 'POST',
requestData: function(node, cb){
this.proxy.request('read', null, {}, {
readRecords : function(o){
return o;
}
}, this.addNodes, this, {node:node, cb:cb});
},

CrazyEnigma
8 Dec 2009, 9:09 PM
open this (http://extjs.com/forum/forums-remote.php).

It looks exactly the same as any TreeLoader expected return. I think the forum's look and feel is driven by the css file.

If you look at the API ScriptTagProxy is to get data cross-domains, so if you are getting data from your server, there is no need to use ScriptTagProxy.

JoyfulBobHome
10 Dec 2009, 10:28 AM
OK, thanks. I built my JSON response to be:


[
{
"id": "10",
"text": "Ext JS Premium Forums",
"cls": "forum-ct",
"iconCls": "forum-parent",
"expanded": true,
"children": [
{
"id": "11",
"text": "Ext: Premium Help",
"cls": "forum",
"iconCls": "icon-forum",
"threads": "7732",
"totalPosts": 46727,
"leaf": true
},
{
"id": "4",
"text": "Ext: Feature Requests",
"cls": "forum",
"iconCls": "icon-forum",
"threads": "1222",
"totalPosts": 6943,
"leaf": true
}
]
},
{
"id": "22",
"text": "Ext General Forums",
"cls": "forum-ct",
"iconCls": "forum-parent",
"expanded": true,
"children": [
{
"id": "6",
"text": "Ext: Open Discussion",
"cls": "forum",
"iconCls": "icon-forum",
"threads": "3172",
"totalPosts": 28227,
"leaf": true
},
{
"id": "33",
"text": "Gxt: Open Discussion",
"cls": "forum",
"iconCls": "icon-forum",
"threads": "726",
"totalPosts": 4030,
"leaf": true
}
]
},
{
"id": "39",
"text": "Ext JS Community Forums (3.0)",
"cls": "forum-ct",
"iconCls": "forum-parent",
"expanded": true,
"children": [
{
"id": "40",
"text": "Ext: Help",
"cls": "forum",
"iconCls": "icon-forum",
"threads": "6662",
"totalPosts": 34932,
"leaf": true
}
]
}
]

..and literally changed only 1 line of code in forum.js from Ext's URL to our's:


Ext.extend(Forum.TreeLoader, Ext.tree.TreeLoader, {
// Initial loading of tree
//dataUrl: 'http://extjs.com/forum/forums-remote.php',
dataUrl: 'http://devweb.everbrite.com/evercgi/UXEKB?submit=EKBLOADTABLE',
requestData : function(node, cb){
this.proxy.request('read', null, {}, {
readRecords : function(o){
return o;
}
}, this.addNodes, this, {node:node, cb:cb});
},

...and I get no tree nodes to display. I ensured I had valid JSON using JSONlint. Do I need the totalProperty added to my JSON or literally just the tree nodes' array?

Since the ScriptTagProxy doesn't show the JSON response in Firebug, and there's no JS errors, how does one go about debugging/learning this?

JoyfulBobHome
18 Dec 2009, 8:49 AM
**bump**

JoyfulBobHome
22 Dec 2009, 6:27 AM
I'm trying another solution to load the tree from a file: treeData.php:

treeData.php:

[
{
"id": "10",
"text": "Ext JS Premium Forums",
"cls": "forum-ct",
"iconCls": "forum-parent",
"expanded": true,
"children": [
{
"id": "11",
"text": "Ext: Premium Help",
"cls": "forum",
"iconCls": "icon-forum",
"threads": "7732",
"totalPosts": 46727,
"leaf": true
},
{
"id": "4",
"text": "Ext: Feature Requests",
"cls": "forum",
"iconCls": "icon-forum",
"threads": "1222",
"totalPosts": 6943,
"leaf": true
}
]
},
{
"id": "22",
"text": "Ext General Forums",
"cls": "forum-ct",
"iconCls": "forum-parent",
"expanded": true,
"children": [
{
"id": "6",
"text": "Ext: Open Discussion",
"cls": "forum",
"iconCls": "icon-forum",
"threads": "3172",
"totalPosts": 28227,
"leaf": true
},
{
"id": "33",
"text": "Gxt: Open Discussion",
"cls": "forum",
"iconCls": "icon-forum",
"threads": "726",
"totalPosts": 4030,
"leaf": true
}
]
},
{
"id": "39",
"text": "Ext JS Community Forums (3.0)",
"cls": "forum-ct",
"iconCls": "forum-parent",
"expanded": true,
"children": [
{
"id": "40",
"text": "Ext: Help",
"cls": "forum",
"iconCls": "icon-forum",
"threads": "6662",
"totalPosts": 34932,
"leaf": true
}
]
}
]


forum.js - only changed the dataUrl line:


Ext.extend(Forum.TreeLoader, Ext.tree.TreeLoader, {
// Initial loading of tree
//dataUrl: 'http://extjs.com/forum/forums-remote.php',
//Bob..12.22.2009 We're going to load our tree from a data array initially for demo:
dataUrl:'forumTree.php',
requestData : function(node, cb){
this.proxy.request('read', null, {}, {
readRecords : function(o){
return o;
}
}, this.addNodes, this, {node:node, cb:cb});
},

...and my tree does not load; no JS errrors; no hints in FF; what am I missing?! I'm stumped over how to proceed to debug.

mschwartz
22 Dec 2009, 7:43 AM
Run it in firefox with the firebug extension installed.

Set firebug to break on errors and also use the network monitor tab (of firebug) to see that you are sending and receiving what you expect.

You can set breakpoints with firebug and step into ExtJS (use ext-all-debug.js) and watch it do it's under the hood thing.

JoyfulBobHome
22 Dec 2009, 8:23 AM
Thanks for the prompt reply!

I have FireBug installed and breaking on all errors and there are none.

I stepped through this function and arguments "o" and "arg" are undefined, meaning it didn't process/read my treeData.php file:


addNodes : function(o, arg){
var node = arg.node;
for(var i = 0, len = o.length; i < len; i++){
var n = this.createNode(o[i]);
if(n){
node.appendChild(n);
}
}
arg.cb(this, node);
}

...so somehow my treeData.php file is not getting loaded -- so what do I do next? This is the part where I have not other info, code, or data to check - this is the point at which I'm stumped.

If all I have to provide is the JSON tree array with the nodes as a previous reply indicated, then this should work. However, it doesn't. In reading the API docs for HttpScriptProxy says, "The content passed back from a server resource requested by a ScriptTagProxy must be executable JavaScript source code because it is used as the source inside a <script> tag" so do I need to do that? If not, what then?

Thanks in advance!

mschwartz
22 Dec 2009, 2:37 PM
This code is taken directly from the ScriptTagProxy page of the API docs:



boolean scriptTag = false;
String cb = request.getParameter("callback");
if (cb != null) {
scriptTag = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (scriptTag) {
out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (scriptTag) {
out.write(");");
}


What is written with out.write() in all that is the form of executable Javscript code required.

JoyfulBobHome
22 Dec 2009, 8:53 PM
Thanks again for your reply! I'll give that a go, if I only knew where to put this code; the API doc says nothing; neither does the example page.

First off, thanks to ExtJS for all the wonderful examples. Please allow me a moment to express my frustration in wasting hours over 2 weeks getting this adapted.

Can someone please educate me and remove my confusion? How does ExtJS expect a user to see this example and use it? Why is the example incomplete in not either giving the tree code, and/or instructions on how to actually implement it?

I presume this example is written for us so that we can start using this working template, and customize for our needs. But how can that happen when one must guess how to code the response/populate the tree data? As I've said, I've written trees before and I'm baffled here. I haven't found 1 working complete example to show me how to do this using a ScriptTagProxy. Sure, I can go take a stab at the API doc, but how do I even know what I need to code if there's no instructions and where to code it?

Why do we need to add extra code to get it to work if the example works from ExtJS's web site? Is this extra code supposed to be in the JSON response as well?

I want to learn, but there should be a more systematic approach for users when they see a example to steer them in the right direction. I know someone will reply and tell me where I'm wrong; does that not only illustrate where this example is lacking? Thanks in advance; I'll be so happy when I finally get this working.

mschwartz
23 Dec 2009, 7:16 AM
There's nothing wrong with the examples, IMO.

The code I posted for you from the API docs is server side code (Java) to generate JSON as executable Javascript.

Think about what a script tag proxy really is. You don't have to consider ExtJS for this. Javascript is sandboxed so you cannot do XHR/AJAX requests to a server other than the one that served the WWW page. To get around this, people figured out that if you add a script tag <script > to the DOM, it will fetch executable javascript from another server and execute it. So all ExtJS has done is wrap this trick in syntactic sugar that is ScriptTagProxy.

The thing is, the JSON returned has to be executable.

{ 'a': 10, 'b': 20 }

is invalid.

but something like:

var foo = "{ 'a': 10, 'b': 20}";

is executable.

Ext's Script Tag Proxy posts to the server the name of the variable it wants you to use (e.g. not 'foo' as in var foo above). It has to know what variable to convert from a JSON notation string into a javascript object, right? And there might be more than one script tag concurrently waiting for servers to respond; so Ext needs a unique variable per proxy...

You are modifying the example which does not require a script tag proxy. Obviously the example works fine. The trick for a newbie to ExtJS is to be able to see what the examples do (source code!), learn your way around the API docs, and visualize how you make your own programs expand on these things.

JoyfulBobHome
23 Dec 2009, 11:02 AM
Once again, thanks for your reply. I got it working once I removed the scriptTagProxy and just coded it like our other trees. The threw scriptTagProxy me; I hadn't dealt with that and don't understand it. But your explanations greatly help! So thanks!