PDA

View Full Version : EXTJS Tree not loading



vmanickamus
12 Oct 2010, 11:03 AM
here is my code.

var Categorytree = new Ext.tree.TreePanel({
id: 'CategorytreeView',
title: 'Reporting Structure',
collapsible: true,
margins: '0 0 5 5',
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
rootVisible: true,
lines: true,
border: false,
split: true,
region: 'center',
width: 325,
height: 500,
minSize: 175,
maxSize: 400,

dataUrl: 'Category.json',
root: {
nodeType: 'async',
text: 'RePorting Structure',
draggable: false,
id: 'CategoryRoot'
}

});

var CategoryPanel = new Ext.Panel({
renderTo: Ext.getBody(),
frame: true,
title: 'PL Structures - Categories',
height: 800,
layout: 'border',
items: [
Categorytree

]

Category.json
[
{id:"1",
text:"M&M ",
leaf:true},
{id:"2",
text:"Hersheys",
leaf:false,
cls:"folder",
children:[
{
id:"30",
text:"Kisses",
leaf:true
},
{
id:"31",text:"Dark Choclate",leaf:true
}
],
{id:"3",text:"AlmondJoy",leaf:true}
]

Please let me know what I am missing.
My page don't display any data.

Condor
13 Oct 2010, 3:05 AM
Your JSON isn't valid, which you can clearly see if you indent it correctly:

[{
id: "1",
text: "M&M ",
leaf: true
},
{
id: "2",
text: "Hersheys",
leaf: false,
cls: "folder",
children: [{
id: "30",
text: "Kisses",
leaf: true
},
{
id: "31",
text: "Dark Choclate",
leaf: true
}],
{
id: "3",
text: "AlmondJoy",
leaf: true
}]

Animal
13 Oct 2010, 3:07 AM
Which indicates that it's "hand coded"?

It's really essential to use a good JSON library to generate valid JSON. There are quite a few pitfalls which they avoid.

vmanickamus
13 Oct 2010, 7:54 AM
Which indicates that it's "hand coded"?

It's really essential to use a good JSON library to generate valid JSON. There are quite a few pitfalls which they avoid.


Ok, I have a Proper Json generated by my ASP.NET app. Since I wanted to give a dummy json object I quickly type this one out.

The actual problem is the tree panel is not loading the json from my webserver when refered through the data URL.

Ext.onReady(function() {
new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader({ dataUrl: 'Cat.json' }),
root: new Ext.tree.AsyncTreeNode({
expanded: false
}),
rootVisible: true,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
}, {
region: 'center',
xtype: 'tabpanel'
}]
});

});

doesn't work where my cat.json is

[{
id: "1",
text: "M&M ",
leaf: true
},
{
id: "2",
text: "Hersheys",
leaf: false,
cls: "folder",
children: [{
id: "30",
text: "Kisses",
leaf: true
},
{
id: "31",
text: "Dark Choclate",
leaf: true
}]
},
{
id: "3",
text: "AlmondJoy",
leaf: true
}
]

*Note: please just assume the json is valid. ont he other hand

Ext.onReady(function() {
new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
//loader: new Ext.tree.TreeLoader({ dataUrl: 'Categories.json' }),
root: new Ext.tree.AsyncTreeNode({
expanded: false,
children:
[{
id: "1",
text: "M&M ",
leaf: true
},
{
id: "2",
text: "Hersheys",
leaf: false,
cls: "folder",
children: [{
id: "30",
text: "Kisses",
leaf: true
},
{
id: "31",
text: "Dark Choclate",
leaf: true
}]
},
{
id: "3",
text: "AlmondJoy",
leaf: true
}
]
}),
rootVisible: true,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
}, {
region: 'center',
xtype: 'tabpanel'
}]
});

});

is working. I want to know how to connect the root element to the json fromt he tree loader.

I have tried
Categorytree.getLoader().load(Categorytree.root);

Categorytree.getRootNode().expand(true); commands too.

Any help on this is really appriciated. I am struck with this for the past 3 days. :(

Animal
13 Oct 2010, 7:57 AM
Nobody can read that.

Condor
13 Oct 2010, 8:06 AM
Are you sure your JSON is correctly returned by your server?

Attach a loadexception event handler to the loader to see if there is a problem.

jtpacheco
13 Oct 2010, 10:49 AM
When posting code (especially a lot), it is always in best practice, and indeed, courteous, to surround the code with CODE or PHP tags. Don't expect too much help otherwise, as you shouldn't expect someone else to try and dig out what's going on with unformatted code.